/* ------------------------------- */
/* COLOR                           */
/* ------------------------------- */

:root {
    --color-white: #fff;
    --color-bleufonce: #003e5d;
    --color-bleuturquoise: #009cb4;
    --color-bleuturquoise-op: #009cb411;
    --color-gris: #eaeaea;
    --color-black: #222222;
    --color-violet: #e5007e;

    --mobile-view: 768px;
}

/* ------------------------------- */
/* RESET DE BASE + BOX SIZING      */
/* ------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    font-family: "Causten", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: #222;
    background-color: #fff;
}

button {
    border: none;
}

/* Suppression du margin des titres / listes par défaut */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure {
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 3.5rem;
}

/* Images modernes */
img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Liens */
a {
    color: inherit;
    text-decoration: none;
}

/* Boutons */
button {
    font-family: inherit;
    cursor: pointer;
}

/* Inputs */
input,
textarea,
select {
    font-family: inherit;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}


/* -------------------------------- */
/* FONTS (Causten)                  */
/* -------------------------------- */

@font-face {
    font-family: "Causten";
    src: url("../fonts/Causten-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Causten";
    src: url("../fonts/Causten-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Causten";
    src: url("../fonts/Causten-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Causten";
    src: url("../fonts/Causten-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Causten";
    src: url("../fonts/Causten-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.ico-phone,
.ico-mail {
    position: relative;
    padding-left: 1.35rem;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1rem;
        height: 1rem;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

.ico-phone::before {
    background-image: url('../imgs/ico-phone.svg');
}

.ico-phone.black::before {
    background-image: url('../imgs/ico-phone-black.svg');
}

.ico-mail::before {
    background-image: url('../imgs/ico-envelope.svg');
}

.ico-mail.black::before {
    background-image: url('../imgs/ico-envelope-black.svg');
}

.container {
    width: 1300px;
    margin: 0 auto;
    /* padding: 0 2rem; */

    @media screen and (max-width: 1300px) {
        width: 100%;
        margin: 0;
        padding: 0 15px;
    }
}

.btn-primary,
.wp-block-button a {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1rem;
    color: var(--color-white);
    background-color: var(--color-bleuturquoise);
    border: 1px solid var(--color-bleuturquoise);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    transition: color 0.25s ease-in-out, background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;

    &.violet {
        color: var(--color-violet);
        background-color: var(--transparent);
        border-color: var(--color-violet);

        &:hover {
            color: var(--color-white);
            background-color: var(--color-bleuturquoise);
            border: 1px solid var(--color-bleuturquoise);
        }
    }

    &.no-violet {
        &:hover {
            color: var(--color-white);
            background-color: var(--color-bleufonce);
            border: 1px solid var(--color-bleufonce);
        }
    }

    &:hover {
        color: var(--color-violet);
        background-color: var(--transparent);
        border-color: var(--color-violet);
    }

    @media screen and (max-width: 768px) {
        font-size: 0.85rem;
        line-height: 0.85rem;
        padding: 0.6rem 1.25rem;
        display: inline-block;
        white-space: nowrap;
    }

    &.small {
        border-radius: 4px;
        padding: 0.35rem 1rem;
        font-size: 0.75rem;
        line-height: 0.75rem;
    }
}

h2 {
    color: var(--color-bleufonce);
    font-size: 3.2rem;
    font-weight: 900;
}

.section-title {
    display: flex;
    align-items: baseline;
    gap: 20px;

    &::after {
        content: "";
        flex: 1;
        height: 2px;
        background-color: var(--color-bleuturquoise);
        /* opacity: 0.5; */
    }

    @media screen and (max-width: 768px) {
        font-size: 2rem;
        line-height: 2.15rem;
    }
}

.section-subtitle {
    color: var(--color-bleuturquoise);
    font-size: 1.75rem;
    line-height: 2.15rem;
    font-weight: 100;
    padding: 1rem 0;

    @media screen and (max-width: 768px) {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.subsection-title {
    margin: 4rem 0 3.5rem 0;
    color: var(--color-bleuturquoise);
    font-size: 2.25rem;
    letter-spacing: 1px;

    @media screen and (max-width: 768px) {
        margin: 2rem 0 1.5rem 0;
        font-size: 1.55rem;
        /* line-height: 1.75rem; */
    }
}

.section-btn {
    margin: 1rem 0;
    text-align: right;
}

.background-gradient {
    background: #003E5D;
    background: linear-gradient(90deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
    color: var(--color-white);
}

/* header */
.site-header {
    /* width: 85%; */
    width: 1300px;
    margin: 0 auto;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
    position: relative;

    @media screen and (max-width: 768px) {
        height: auto;
    }

    @media screen and (max-width: 1400px) {
        /* width: 100%; */
        padding: 0 35px;
    }

    @media screen and (max-width: 1290px) {
        width: 100%;
        padding: 0 35px;
    }

    .adweb-hamburger {
        display: none;
        position: absolute;
        width: 48px;
        height: 48px;
        top: 50%;
        right: 5%;
        transform: translateY(-50%);
        cursor: pointer;

        @media screen and (max-width: 1070px) {
            display: block;
        }

        span {
            display: block;
            background-color: var(--color-violet);
            height: 6px;
            width: 100%;
            margin-bottom: 6px;
            border-radius: 24px;
        }

    }

    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;

        .header-logo {
            padding: 16px 0;

            @media screen and (max-width: 768px) {
                padding: 22px 0;
            }
        }

        .main-nav {

            @media screen and (max-width: 1070px) {
                display: block;
                width: 100vw;
                height: 100vh;
                background-color: var(--color-bleufonce);
                position: absolute;
                top: -100vh;
                left: 0;
                z-index: 999;
                transition: all 0.35s;

                &.open {
                    top: 0;
                }
            }

            #adweb-close-menu {
                position: absolute;
                top: 32px;
                right: 32px;
                width: 32px;
                height: 32px;
                background-image: url('../imgs/ico_close.svg');
                background-size: cover;
                display: none;

                @media screen and (max-width: 1070px) {
                    display: block;
                    cursor: pointer;
                }
            }

            ul {
                display: flex;
                gap: 1rem;

                @media screen and (max-width: 1070px) {
                    margin-top: 120px;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 2rem;
                }

                li {

                    @media screen and (max-width: 1070px) {
                        /* border-top: 2px solid var(--color-bleuturquoise-op); */
                        border-bottom: 2px solid var(--color-bleuturquoise-op);
                        padding-top: 1rem;
                    }

                    a {
                        color: var(--color-bleufonce);
                        font-weight: 600;
                        font-size: 1.0rem;
                        text-transform: uppercase;
                        padding: 10px 0;
                        border-bottom: 8px solid transparent;
                        border-radius: 12px;
                        transition: border-color 0.25s ease-in-out, color 0.25s ease-in-out;
                        position: relative;

                        @media screen and (max-width: 1400px) {
                            font-size: 0.85rem;
                        }

                        @media screen and (max-width: 1070px) {
                            color: var(--color-white);
                            font-size: 1.25rem;
                        }

                        &::before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            width: 0;
                            height: 1px;
                            background-color: var(--color-bleuturquoise);
                            transition: width 0.25s ease-in-out;
                        }

                        &::after {
                            opacity: 0;
                            content: '';
                            position: absolute;
                            bottom: -4px;
                            right: 0px;
                            width: 8px;
                            height: 8px;
                            background-color: var(--color-bleuturquoise);
                            transition: opacity 0.25s ease-in;
                            transition-delay: 0.25s;
                            border-radius: 100%;
                        }

                        &:hover::before {
                            width: calc(100% - 12px);
                        }

                        &:hover::after {
                            opacity: 1;
                        }
                    }
                }
            }

        }

        #header-contact-button {

            @media screen and (max-width: 1070px) {
                display: none !important;

            }

            @media screen and (max-width: 1400px) {
                display: inline-block;
                font-size: 0.85rem;
                padding: 0.5rem 1rem;
            }
        }
    }
}

.contact-box {
    width: 600px;
    margin: 50px auto;
    padding: 1.5rem 4rem 2rem 4rem;
    text-align: center;
    border-radius: 16px;
    position: relative;

    @media screen and (max-width: 768px) {
        padding: 0.65rem 2rem 2rem 2rem;
        width: 90%;
    }

    h3 {
        font-size: 2.65rem;
        font-weight: 600;

        @media screen and (max-width: 768px) {
            font-size: 1.65rem;
        }
    }

    p {
        padding: 0.75rem 0;

        @media screen and (max-width: 768px) {
            font-size: 0.90rem;
            padding: 0.20rem 0;
        }
    }

    input {
        padding: 0.75rem 1.15rem;
        margin: 0.5rem 0.5rem;
        border: none;
    }

    .contact-submit {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: -0.85rem;
        left: 0;

        button,
        a {
            box-shadow: 0px -6px 6px rgba(0, 0, 0, 0.25);
            letter-spacing: 1px;
        }
    }

}

/* hero section */
.hero {
    background: #003E5D;
    background: linear-gradient(90deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
    color: var(--color-white);

    @media screen and (max-width: 768px) {
        height: calc(100dvh - 100px);
    }

    img {
        border-radius: 4px;
    }

    .hero-container {
        padding-top: 75px;
        padding-bottom: 150px;
        display: flex;

        @media screen and (max-width: 768px) {
            padding-top: 25px;
            padding-bottom: 156px;
            flex-direction: column;
            gap: 15%;

            justify-content: center;
            /* centre verticalement dans le hero */
            align-items: center;
            /* centre horizontalement */
            height: 100%;
            /* nécessaire pour que le centrage vertical fonctionne */
            text-align: center;
            /* optionnel, pour centrer les textes */
        }

        .hero-text {

            h1,
            p {
                display: none;
            }
        }
    }
}

/* intro section */
.intro {
    margin-top: -75px;

    @media screen and (max-width: 768px) {
        margin: 0;
    }

    .container {
        border-radius: 16px;
        background-color: var(--color-white);
        padding: 0 2rem;

        @media screen and (max-width: 768px) {
            padding: 15px 0;
        }

        p {
            padding: 2rem 10rem;
            font-size: 1.75rem;
            font-weight: 100;
            color: var(--color-bleufonce);

            @media screen and (max-width: 768px) {
                padding: 20px;
                font-size: 1.25rem;
            }
        }
    }
}

/* Dernières Actualités */
#section-derniere-actualites,
.section.section-actualite {
    margin: 2rem 0 4rem 0;
    padding: 2rem 0;
    background-color: var(--color-gris);

    .adweb-articles-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 2rem 0;
        gap: 2rem;

        @media screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
        }

        article {
            background-color: var(--color-white);
            border-radius: 12px;
            position: relative;
            padding-bottom: 3rem;
            overflow: visible;

            .adweb-article-image {
                display: block !important;
                aspect-ratio: 16 / 9;

                img {
                    border-radius: 12px 12px 0 0;
                    width: 100%;

                }
            }

            .adweb-article-texte {
                padding: 1rem 1.25rem;

                h2 {
                    margin: 0 0 0.5rem 0;
                    padding: 0;
                    font-size: 2rem;
                    line-height: 2.35rem;
                }

                .read-more {
                    position: absolute;
                    right: 1rem;
                    bottom: 1rem;
                }

            }
        }
    }
}

/* Qui sommes nous */
#section-qui-sommes-nous {

    .team-grid {
        padding: 75px;
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        position: relative;
        overflow: visible;

        @media screen and (max-width: 768px) {
            flex-direction: column;
            padding: 0;
            align-items: center;
            justify-content: center;
            padding: 25px 0;
            gap: 3rem;
        }

        .team-member {
            text-align: center;
            position: relative;
            overflow: visible;
            padding: 0 !important;
            z-index: 1;
            width: auto;

            img {
                position: relative;
                z-index: 10;
                width: 160px;
                height: auto;
                border-radius: 128px;
                transition: transform 0.25s, box-shadow 0.25s;

                &:hover {
                    transform: scale(115%);
                    box-shadow: 0 16px 16px #000000a0;
                    z-index: 50;
                }
            }

            h3 {
                padding-top: 32px;
                text-transform: uppercase;
                font-size: 1.25rem;
                line-height: 2rem;
                font-weight: 100;

                @media screen and (max-width: 768px) {
                    padding-top: 15px;
                }

                span {
                    display: block;
                    font-weight: 600;
                }
            }
        }
    }
}

/* Valeurs */
#section-valeurs {
    margin: 45px 0;
    padding: 45px 0 430px 0;
    background-color: var(--color-gris);

    @media screen and (max-width: 768px) {
        padding: 45px 0 135px 0;
    }

    .values-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding: 40px 0;

        @media screen and (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
        }

        .value-card {
            text-align: center;
            border-radius: 12px;
            padding: 4rem;
            background-color: var(--color-white);

            h3 {
                color: var(--color-bleuturquoise);
                font-size: 1.75rem;
                margin-bottom: 0.85rem;
            }

            p {
                font-size: 1rem;
            }
        }
    }
}

/* newsletter */
#section-newsletter {
    margin-top: -440px;

    @media screen and (max-width: 768px) {
        margin-top: -185px;
    }

    img {
        border-radius: 12px;
    }

    .contact-box {
        margin-top: -100px;

        @media screen and (max-width: 768px) {
            margin-top: -60px;
        }
    }

    .contact-form p {
        color: var(--color-white);
    }
}

/* propositions */
#section-propositions {

    .propositions-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        padding-bottom: 1rem;

        @media screen and (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
        }

        .prop-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            padding: 4rem 2rem;
            background-color: var(--color-gris);
            text-align: center;

            h4 {
                color: var(--color-bleufonce);
                font-size: 2.25rem;
                line-height: 2.25rem;
                margin-bottom: 0.85rem;
            }
        }
    }

    padding: 50px 0;

}

/* calendrier */
#section-calendrier {
    background-color: var(--color-gris);
    padding: 35px 0 4rem 0;

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 50px 0 75px 0;
        gap: 4rem;

        @media screen and (max-width: 768px) {
            grid-template-columns: repeat(1, 1fr);
            padding: 35px 0 75px 0;
            gap: 2rem;
        }

        .calendar-item {
            display: flex;
            flex-direction: column;
            background-color: var(--color-white);
            padding: 4rem;
            text-align: center;
            aspect-ratio: 1 / 1;
            align-items: center;
            justify-content: center;
            border-radius: 100%;

            @media screen and (max-width: 768px) {
                grid-template-columns: repeat(1, 1fr);
                padding: 2rem;
                width: 280px;
                height: 280px;
                margin: 0 auto;

            }


            h3 {
                color: var(--color-bleuturquoise);
                font-size: 7rem;
                line-height: 7rem;

                @media screen and (max-width: 768px) {
                    font-size: 6rem;
                    line-height: 5rem;
                }
            }

            p {
                color: var(--color-bleuturquoise);
                font-size: 2rem;
                line-height: 2rem;
                font-weight: 700;

                @media screen and (max-width: 768px) {
                    font-size: 1.65rem;
                    line-height: 1.85rem;
                }

            }

            small {
                margin: 1.35rem 0 0 0;
                font-size: 1.15rem;

                @media screen and (max-width: 768px) {
                    margin: 0rem 0 0 0;
                    font-size: 0.95rem;
                }
            }
        }
    }
}

/* contact */
.section-contact {
    padding: 50px 0;
}

/* footer */
footer {
    padding: 2rem 0 0 0;

    @media screen and (max-width: 768px) {
        padding: 1rem 0;
    }

    .footer-nav {
        border-bottom: 2px solid var(--color-white);

        @media screen and (max-width: 768px) {
            display: none;
        }

        ul {
            display: flex;
            gap: 2rem;
            justify-content: right;
            padding-bottom: 1.75rem;

            li {
                a {
                    font-size: 0.85rem;
                    text-transform: uppercase;
                    padding: 0;
                    margin: 0;
                }
            }
        }
    }

    .infos-container {
        display: flex;
        justify-items: start;
        align-items: start;
        padding: 2rem 0 1rem 0;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        div {
            width: 50%;

            @media screen and (max-width: 768px) {
                width: 100%;
            }
        }

        .footer-logo {

            p {
                padding: 2rem 0;
                text-transform: uppercase;
                color: var(--color-bleuturquoise);
                font-weight: 600;
            }
        }

        .footer-info {
            padding-top: 0.75rem;
            text-align: left;

            p {
                color: var(--color-white);
                text-transform: uppercase;
                font-weight: 600;
                letter-spacing: 1px;
                font-size: 1rem;
                line-height: 1.25rem;
            }
        }
    }
}

/* Go Up */
#go-up {
    position: fixed;
    opacity: 0;
    right: 5%;
    bottom: 5%;
    width: 36px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background-color: var(--color-bleuturquoise);
    background-image: url('../imgs/ico-caret-up.svg');
    background-size: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.55);

    &.visible {
        opacity: 1;
        pointer-events: auto;
    }

    &.animate {
        animation: shake 0.6s ease;
    }
}

/* Animation shake */
@keyframes shake {
    0% {
        transform: translateX(0);
    }

    15% {
        transform: translateX(-3px);
    }

    30% {
        transform: translateX(3px);
    }

    45% {
        transform: translateX(-3px);
    }

    60% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}

/* --------------------------------------------
 * Mentions & Rgpd & Cookies
 * -------------------------------------------- */
.windows-legal {

    .header-logo {
        padding-bottom: 4rem;
    }

    position: fixed;
    bottom: -100%;
    /* bottom: 100px; */
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 999;
    padding: 2rem;
    background-color: #fff;
    overflow-y: auto;
    transition: bottom 0.25s ease-in-out;

    &.open {
        bottom: 0;
    }

    h2 {
        margin-bottom: 0rem;
        margin-top: 1rem;
        padding: 0;
        font-size: 2.5rem;
        color: var(--color-bleuturquoise);
    }

    h3 {
        margin-top: 2rem;
        font-size: 2rem;
        color: var(--color-bleuturquoise);
    }
}

.close-button {
    display: block;
    width: 36px;
    height: 36px;
    position: absolute;
    top: 3rem;
    right: 8rem;
    background-image: url('../imgs/ico_close.svg');
    background-size: cover;
    cursor: pointer;

    @media screen and (max-width: 768px) {
        top: 15px;
        right: 15px;
    }

}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* single evenement */
.single-evenement-container {

    /* height: 100vh; */
    min-height: 60vh;

    h2 {
        color: var(--color-bleuturquoise);
        font-size: 2rem;
        line-height: 2rem;
        margin: 1.25rem 0;
    }

    .header-title-container {
        background: #003E5D;
        background: linear-gradient(90deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
        background-image: url(../imgs/fnd-hero.svg);
        background-size: cover;
        color: var(--color-white);
        height: 240px;
        padding-top: 38px;

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

            h1 {
                font-size: 1.65rem;
            }
        }
    }

    .intro {
        background-color: var(--color-white);
        border-radius: 24px;
        margin-top: -75px;
        padding: 1rem 4rem;
        font-size: 1.15rem;

        @media screen and (max-width: 768px) {
            padding: 0 15px;
        }
    }

    .post-content {
        padding-bottom: 2rem;

        p {
            font-size: 1.25rem !important;
            color: var(--color-bleufonce);
        }

    }
}

/* page */
body.page,
body.blog,
body.wp-singular {

    h2 {
        color: var(--color-bleuturquoise);
        font-size: 2rem;
        line-height: 2rem;
        margin: 1.25rem 0;
    }

    .header-title-container {
        background: #003E5D;
        background: linear-gradient(90deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
        background-image: url(../imgs/fnd-hero.svg);
        background-size: cover;
        color: var(--color-white);
        height: 240px;
        padding-top: 38px;

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

            h1 {
                font-size: 1.65rem;
            }
        }
    }

    .intro {
        background-color: var(--color-white);
        border-radius: 24px;
        margin-top: -75px;
        padding: 1rem 4rem;
        font-size: 1.15rem;

        @media screen and (max-width: 768px) {
            padding: 0.5rem 15px;
        }
    }

    p {
        color: var(--color-black);
    }

    /* equipe */
    .team-grid {
        /* padding: 75px; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0rem;
        z-index: 0;
        position: relative;

        @media screen and (max-width: 1300px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }

        @media screen and (max-width: 768px) {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding: 0;
            align-items: center;
            justify-content: center;
            padding: 25px 0;
            gap: 6rem;
        }

        .team-member {
            position: relative;
            overflow: visible !important;
            text-align: center;
            z-index: 1;
            padding-bottom: 10rem !important;
            width: 33.33%;

            @media screen and (max-width: 1200px) {
                width: 100%;
                padding-bottom: 2rem !important;
            }

            img {
                position: relative;
                width: 100%;
                height: 100%;
                object-fit: cover;
                margin: 0 auto;
                z-index: 1;
            }

            button.bio {
                color: var(--color-white);
                background-color: var(--color-violet);
                padding: 4px 8px;
                border-radius: 8px;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                cursor: pointer;
            }

            h3 {
                display: block;
                width: 100%;
                text-align: center;
                padding-top: 28px;
                padding-bottom: 32px;
                text-transform: uppercase;
                font-size: 1.25rem;
                line-height: 2rem;
                font-weight: 100;

                @media screen and (max-width: 768px) {
                    padding-top: 15px;
                }

                span {
                    display: block;
                    font-weight: 600;
                }
            }

            .bulle-wrapper {
                position: absolute;
                top: 0;
                left: 50%;
                width: 100%;
                max-width: 100%;
                height: 100%;
                max-height: 100%;
                transform: translateX(-50%) translateY(-20px);
                opacity: 0;
                pointer-events: none;
                transition: opacity .3s ease, transform .3s ease;
                overflow-y: auto;
                z-index: 999999 !important;

                &.open {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateX(-50%) translateY(0);

                }

                .bulle {
                    position: relative;
                    opacity: 1;
                    width: 100%;
                    text-align: justify;
                    background-color: var(--color-bleuturquoise);
                    padding: 2px;
                    border-radius: 12px;
                    box-shadow: 0 2px 4px #00000055;
                    z-index: 1000000 !important;

                    .bulle-container {
                        background-color: #fff;
                        border-radius: 12px;


                        .close-bio {
                            position: absolute;
                            top: 14px;
                            right: 14px;
                            width: 20px;
                            height: 20px;
                            background-image: url('../imgs/ico_close-bleu.svg');
                            background-repeat: no-repeat;
                            background-size: 16px;
                            background-position: center;
                            cursor: pointer;
                            background-color: var(--color-white);
                            border-radius: 50%;

                        }

                        .bulle-image {
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            margin-bottom: 0.5rem;
                            background: #003E5D;
                            background: linear-gradient(90deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
                            background-image: url(../imgs/fnd-hero.svg);
                            background-size: cover;
                            color: var(--color-white);
                            border-radius: 12px 12px 0 0;
                            padding: 0.5rem;

                            img {
                                border-radius: 160px;
                                padding: 0;
                                margin: 0;
                                height: 4rem;
                                width: auto;
                                aspect-ratio: 1 / 1;
                            }

                            h2 {
                                margin: 0;
                                padding: 0;
                                font-size: 1.75rem;
                                line-height: 1.75rem;
                                color: var(--color-white);
                                font-weight: 600;

                                span {
                                    font-weight: 100;
                                }
                            }
                        }
                    }

                    p {
                        font-size: 1rem;
                        line-height: 1.15rem;
                        padding: 0.5rem 1rem 1rem 1rem;
                        text-align: left;
                    }
                }
            }
        }
    }

    .wp-block-column-is-layout-flow {

        figure {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                max-width: 65%;
                border-radius: 32px;
            }
        }

        h3 {
            font-size: 2rem;
            font-weight: 900;
            color: var(--color-bleufonce);
        }
    }

    .p-intro {
        padding: 0 10rem;
        font-size: 1.75rem;
        font-weight: 100;
        color: var(--color-bleufonce);
    }

    .wp-block-column {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .bck {

        padding: 4rem 0;

        &.bck-grey {
            margin: 1rem 0;
            background-color: var(--color-bleuturquoise);

            h3 {
                color: var(--color-white);
            }

            p {
                color: var(--color-white);
            }
        }

        &.bck-blue {
            margin: 1rem 0;
            background-color: var(--color-violet);

            p {
                color: var(--color-white);
            }

            h3 {
                color: var(--color-white);
            }
        }

        p {
            font-size: 1.35rem;
        }

    }
}

/* BLOG - LISTES DES ARTICLES */
body.blog {

    .adweb-articles-container {
        margin: 2rem 0;
    }

    .adweb-articles-container>article:first-child {
        grid-column: 1 / -1;
        position: relative;
        display: flex;
        background-color: var(--color-white);
        overflow: visible;
        padding-bottom: 0;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        .adweb-article-image {
            width: 45%;

            @media screen and (max-width: 768px) {
                width: 100%;
            }

            img {
                border-radius: 8px;
                width: 100%;

            }
        }

        .adweb-article-texte {
            padding: 0rem 1.25rem;
            width: 55%;

            @media screen and (max-width: 768px) {
                padding: 0 0 2.95rem 0;
                width: 100%;
            }

            h2 {
                margin: 0 0 0 0;
                padding: 0;
                font-size: 3rem;
                line-height: 2.5rem;

                @media screen and (max-width: 867px) {
                    margin: 0.55rem 0 0 0;
                    padding: 0;
                    font-size: 2rem;
                    line-height: 1.8rem;
                }
            }

            p {
                font-size: 1.15rem;

                @media screen and (max-width: 867px) {
                    font-size: 1rem;
                }

                &.date {
                    color: var(--color-violet);
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    margin-bottom: 1rem;
                }
            }

            .read-more {
                position: absolute;
                right: 4rem;
                bottom: 0.25rem;

                @media screen and (max-width: 867px) {
                    right: 1rem;
                    bottom: 1rem;
                }
            }

        }
    }

    .adweb-articles-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        grid-gap: 3rem;

        @media screen and (max-width: 768px) {
            display: flex;
            flex-direction: column;
        }

        article {
            background-color: var(--color-white);
            border-radius: 6px;
            position: relative;
            padding-bottom: 3rem;
            overflow: visible;

            .adweb-article-image {
                aspect-ratio: 16 / 9;

                img {
                    border-radius: 4px;
                    width: 100%;
                }
            }

            .adweb-article-texte {
                padding: 0.25rem 0;

                h2 {
                    margin: 0.55rem 0 0 0;
                    padding: 0;
                    font-size: 2rem;
                    line-height: 1.8rem;
                }

                p {
                    font-size: 1rem;

                    &.date {
                        color: var(--color-violet);
                        font-size: 0.75rem;
                        text-transform: uppercase;
                        margin-bottom: 0.3rem;
                    }
                }

                .read-more {
                    position: absolute;
                    right: 1rem;
                    bottom: 1rem;
                }

            }
        }
    }
}

/* BLOG - Single Article */
body.wp-singular {
    .header-title {
        h1 {
            line-height: 2.75rem;
        }
    }

    article {

        padding-bottom: 4rem !important;

        h2.title-article {
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .date {
            font-size: 0.95rem;
            font-weight: 600;
            color: #999;
            text-transform: uppercase;
            margin: 0.25rem 0 0rem 0;
            padding: 0;
        }

        /* social */
        .share-links {
            display: flex;
            flex-direction: row;
            margin: 1rem 0;
            gap: 8px;

            a {
                img {
                    width: 32px;
                    height: 32px;
                    margin: 0;
                }
            }
        }

        .adweb-article-image {
            display: none;
        }

        img {
            border-radius: 6px;
            margin-bottom: 2rem;
        }
    }

    .wp-block-columns {
        display: flex;
        gap: 1rem;
        margin: 2rem 0;
        padding: 0;

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        .wp-block-column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            padding: 2rem;
            border-radius: 16px;

            @media screen and (max-width: 768px) {
                padding: 0;
            }
        }
    }

}

/**
 * CSS de base du plugin Adweb Événements
 * Entièrement overridable depuis le thème :
 *   /wp-content/themes/votre-theme/adweb-evenements.css
 */

.calendar {
    margin: 3rem 0 !important;
}

/* Container global */
.adweb-events-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    padding: 6rem 0 6rem 0;
}

/* Un événement */
.adweb-event-item {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.30s ease-in-out;

    &:hover {
        transform: scale(125%) rotate(-360deg);

        @media screen and (max-width: 1200px) {
            transform: none;
        }
    }
}

/* Bouton */
.adweb-event-button {
    margin-top: 1.4rem;
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: transparent;
    border: 2px solid var(--color-bleuturquoise);
    border-radius: 999px;
    font-size: 1rem;
    color: var(--color-bleuturquoise);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.adweb-event-button:hover {
    background: var(--color-bleuturquoise);
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .adweb-event-circle {
        width: 260px;
        height: 260px;
        padding: 15px;
    }

    .adweb-event-day {
        font-size: 3.4rem;
    }

    .adweb-event-month {
        font-size: 1.2rem;
    }

    .adweb-event-subtitle {
        font-size: 1rem;
    }
}

.page-id-9 h3 {
    font-size: 3.5rem !important;
}

.hero {
    background-image: url(../imgs/fnd-hero.svg);
    background-size: cover;
}

/*
 * Page contact
 */
#form-contact {
    p {
        color: var(--color-white);
    }
}

.alert {
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 16px;
    background-color: #999;
    color: #ffffff;

    &.alert-success {
        background-color: green;
        color: #ffffff;
    }

    &.alert-danger {
        background-color: red;
        color: #ffffff;
    }
}

/*
 * Affichage d'un evenement
 */
.event-container {
    display: flex;
    margin: 4rem 0;

    @media screen and (max-width: 768px) {
        flex-direction: column;
        margin: 1rem 0;
    }

    .date-event {
        width: 25%;

        @media screen and (max-width: 768px) {
            width: 50%;
            margin: 0 auto;
            display: none;
        }

        .date-event-calendar {
            background: #fff;
            width: 65%;
            margin: 0 auto;
            border-radius: 32px;
            box-shadow: 0px 8px 12px #003E5D41;

            @media screen and (max-width: 768px) {
                width: 100%;
            }

            .month {
                /* background-color: var(--color-violet); */
                background: #E5007E;
                background: linear-gradient(45deg, rgba(229, 0, 126, 1) 0%, rgba(0, 156, 180, 1) 100%);
                color: var(--color-white);
                font-size: 1.85rem;
                line-height: 2rem;
                font-weight: 900;
                text-transform: uppercase;
                text-align: center;
                border-radius: 32px 32px 0 0;
                padding: 1rem 0;
            }

            .date {
                color: var(--color-bleufonce);
                font-size: 4rem;
                line-height: 4rem;
                font-weight: 900;
                text-transform: uppercase;
                text-align: center;
                border-radius: 0 0 32px 32px;
                padding: 2rem 0;
            }
        }

    }

    .post-content {
        width: 75%;
        padding: 0 5rem 0 5rem;

        @media screen and (max-width: 768px) {
            width: 100%;
            padding: 0;
        }
    }
}

.informations {
    display: flex;
    margin-bottom: 4rem;
    flex-direction: column;

    @media screen and (max-width: 768px) {
        margin-bottom: 2rem;
    }

    .infos {
        width: 100%;
        background-color: var(--color-bleuturquoise-op);
        border-radius: 32px;
        padding: 2rem 5rem;
        color: var(--color-bleufonce);

        @media screen and (max-width: 768px) {
            padding: 0.5rem 1rem;

            h3 {
                font-size: 1rem;
            }
        }
    }

    .informations-supplementaire {
        text-align: right;
        margin: 1rem 2rem;

        .evenement-button {
            font-size: 0.85rem;
            text-transform: uppercase;
            padding: 0.5rem 1rem;
            background-color: var(--color-bleuturquoise);
            color: var(--color-white);
            border: 1px solid var(--color-bleuturquoise);
            border-radius: 8px;
            transition: all 0.25s;

            &:hover {
                background-color: var(--color-white);
                color: var(--color-bleuturquoise);
            }
        }
    }

}

/* --------------------- ---------------------
 * Page Qui sommes nous photos -> Equipe 
 * Effet pièce qui tournes
 * --------------------- -------------------*/
.page-id-7 {
    .team-member {
        /* perspective: 800px; */
        perspective: none !important;

        @media screen and (max-width: 768px) {
            perspective: inherit;
            perspective: none !important;
        }
    }

    .team-member .coin {
        width: 260px;
        height: 260px;
        position: relative;
        margin: 0 auto 15px;
        transform-style: preserve-3d;
        transform: rotateY(0deg) scale(1);
        transition: transform 0.8s ease-in-out, box-shadow 0.8s ease-in-out;
        border-radius: 50%;
    }

    .team-member:hover .coin {
        /* transform: rotateY(360deg) scale(1.5);
        box-shadow: 0 16px 16px #000000a0; */
    }

    .team-member .face {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        backface-visibility: hidden;
        overflow: hidden;
    }

    .team-member .face.front img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .team-member .face.back {
        transform: rotateY(180deg);
        background-image: url(../imgs/fnd-hero.svg);
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .team-member .face.back .logo {
        width: 60%;
        opacity: 0.9;
    }
}

/*
 * Page évenements - LE CALENDRIER
 */
.page-id-13 {

    #calendrier {
        margin-top: 4rem;
        margin-bottom: -2rem;

        ul {
            display: flex;
            justify-content: center;
            gap: 2rem;

            @media screen and (max-width: 768px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
            }

            li {
                text-align: center;

                a {
                    padding: 0.5rem 2rem;
                    border-radius: 32px;
                    /* border: 1px solid var(--color-violet); */
                    box-shadow: 0 2px 2px color-mix(in srgb, var(--color-bleuturquoise) 75%, black);
                    background-color: var(--color-bleuturquoise);
                    color: var(--color-white);

                    &:hover {
                        border: 1px solid color-mix(in srgb, var(--color-bleuturquoise) 75%, black);
                        box-shadow: 0 -2px 2px color-mix(in srgb, var(--color-bleuturquoise) 75%, black);
                        background-color: color-mix(in srgb, var(--color-bleuturquoise) 90%, black);
                    }
                }
            }
        }
    }

    .adweb-events-grid {
        display: block;
        max-width: 75%;
        margin: 0 auto;
        padding: 0 0 4rem 0;
        background-image: url('../imgs/trait.svg');
        background-repeat: repeat-y;
        background-position: center top;

        @media screen and (max-width: 900px) {
            max-width: 100%;
        }

        .adweb-event-item.right .adweb-event-container {
            flex-direction: row-reverse;

            .adweb-infos-content {
                text-align: right;
                padding-right: 1rem;
            }
        }

        .adweb-event-item.left .adweb-event-container {
            flex-direction: row;

            .adweb-infos-content {
                text-align: left;
                padding-left: 2rem;
            }
        }

        .adweb-event-item.color_1 {

            .adweb-event-container {
                border-bottom: 2px solid var(--color-bleufonce);
            }

            .adweb-date-content {
                background: var(--color-bleufonce);
                background: linear-gradient(0deg, rgba(0, 62, 93, 1) 0%, rgba(0, 156, 180, 1) 100%);
            }
        }

        .adweb-event-item.color_2 {
            .adweb-event-container {
                border-bottom: 2px solid var(--color-bleuturquoise);
            }

            .adweb-date-content {
                background: var(--color-bleuturquoise);
            }
        }

        .adweb-event-item.color_3 {

            .adweb-event-container {
                border-bottom: 2px solid var(--color-violet);
            }

            .adweb-date-content {
                background: var(--color-violet);
                background: linear-gradient(0deg, rgba(229, 0, 126, 1) 0%, rgba(0, 156, 180, 1) 100%);
            }
        }

        .adweb-event-item.color_4 {
            .adweb-event-container {
                border-bottom: 2px solid var(--color-bleufonce);
            }

            .adweb-date-content {
                background: var(--color-bleufonce);
            }
        }

        .adweb-event-item.color_5 {

            .adweb-event-container {
                border-bottom: 2px solid var(--color-violet);
            }

            .adweb-date-content {
                background: var(--color-violet);
            }
        }

        .adweb-event-item.color_6 {
            .adweb-event-container {
                border-bottom: 2px solid var(--color-bleuturquoise);
            }

            .adweb-date-content {
                background: var(--color-violet);
                background: linear-gradient(180deg, rgba(229, 0, 126, 1) 0%, rgba(0, 156, 180, 1) 100%);
            }
        }
    }

    .adweb-anchor-month {
        text-align: center;
        margin-top: 6rem;
        margin-bottom: 2rem;

        span {
            color: var(--color-white);
            background-color: var(--color-violet);
            padding: 8px 30px;
            border-radius: 12px;
            /* box-shadow: 0 2px 2px var(--color-black); */
            font-size: 0.85rem;
            line-height: 0.85rem;

        }
    }


    .adweb-event-item {
        margin: 0.5rem auto 2rem;

        &:hover {
            transform: none;
        }

        .adweb-event-container {
            width: 100%;
            display: flex;
            flex-direction: row-reverse;
            width: 100%;

            justify-content: first baseline;
            align-items: inherit;
            gap: 0rem;

            .adweb-date-content {
                width: 25%;
                display: flex;
                gap: 1rem;
                padding: 0.88rem 1.25rem;
                justify-content: center;

                @media screen and (max-width: 768px) {
                    flex-direction: column;
                    gap: 0.15rem;
                    align-items: center;
                    text-align: center;
                }


                .adweb-event-day,
                .adweb-event-month,
                .adweb-event-year {
                    font-size: 2rem !important;
                    line-height: 2rem !important;
                    font-weight: 900 !important;
                    color: var(--color-white) !important;
                    margin: 0;
                    padding: 0;


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

                }

                .adweb-event-day {}

                .adweb-event-month {
                    text-transform: uppercase;
                }

                .adweb-event-year {}

            }

            .adweb-infos-content {
                width: 75%;
                min-height: 3.76rem;
                text-align: right;
                background-color: white;

                .adweb-event-title {
                    text-transform: uppercase;
                    margin: 0 0 0.35rem 0;
                    padding: 0;
                    font-weight: 400;
                    font-size: 1.5rem;
                    line-height: 1.5rem;
                }

                .adweb-event-subtitle {
                    text-transform: uppercase;
                    margin: 0;
                    padding: 0;
                    font-weight: 400;
                    font-size: 1rem;
                }

            }
        }
    }
}

/* Rond pour la page d'accueil */
.adweb-event-circle {
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: var(--color-bleuturquoise);
    border: 2px solid var(--color-bleuturquoise);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.home .adweb-event-circle {
    background: var(--color-white);
    border: 2px solid var(--color-white);
}

/* Jour */
.adweb-event-day {
    font-size: 5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-white);
}

/* Mois + année */
.adweb-event-month {
    margin-top: 0.3rem;
    font-size: 1.6rem;
    color: var(--color-white);
    font-weight: 500;
}

.home .adweb-event-day,
.home .adweb-event-month {
    color: var(--color-bleuturquoise);
}

/* Sous-titre */
.adweb-event-subtitle {
    margin-top: 1rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-bleufonce);
}

/* Heure / Durée */
.adweb-event-time {
    margin-top: 0.6rem;
    font-size: 1rem;
    color: var(--color-white);
}

.home .adweb-event-subtitle,
.home .adweb-event-time {
    color: var(--color-black);
}


.adweb-event-time span {
    display: inline-block;
}

.home .hero {
    @media screen and (max-width: 768px) {
        background-image: url('../imgs/fnd-hero-mobile.svg') !important;
        background-size: 100% auto;
        background-repeat: no-repeat !important;
    }
}


/* wordpress */
/* Cas normal : WordPress met la classe sur le conteneur */
.wp-block-button.has-text-align-center {
    text-align: center;
}

.wp-block-button.has-text-align-right {
    text-align: right;
}

.wp-block-button.has-text-align-left {
    text-align: left;
}

/* Cas où WordPress met la classe sur le <a> (bug courant) */
.wp-block-button__link {

    &.has-text-align-center {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    &.has-text-align-right {
        display: inline-block;
        margin-left: auto;
    }

    &.has-text-align-left {
        display: inline-block;
        margin-right: auto;
    }
}

/* Centrer un bloc Boutons SI le bouton contient has-text-align-center */
.wp-block-buttons:has(.has-text-align-center) {
    display: flex;
    justify-content: center;
}

.wp-block-buttons:has(.has-text-align-right) {
    display: flex;
    justify-content: flex-end;
}

.wp-block-buttons:has(.has-text-align-left) {
    display: flex;
    justify-content: flex-start;
}

/* wp ul wp-block-list */
.wp-block-list {
    padding: 1rem 1.5rem;
    /* list-style: circle; */

    li {
        position: relative;
        padding-left: 22px;
        padding-bottom: 0.5em;
        line-height: 1.2em;

        &::before {
            content: '';
            position: absolute;
            display: block;
            width: 8px;
            height: 8px;
            top: calc(0.6em - 3px);
            left: 0;
            background-color: var(--color-bleufonce);
            border-radius: 6px;

        }

    }
}

/* Bloc Media & Texte (desktop par défaut) */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Image */
.wp-block-media-text__media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* optionnel */
    display: block;
}

/* Contenu */
.wp-block-media-text__content {
    font-size: 1.1rem;
    line-height: 1.5;
}

.wp-block-column.is-vertically-aligned-top {
    display: flex;
    justify-content: flex-start !important;
}

/* Version mobile améliorée */
@media (max-width: 768px) {
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wp-block-media-text__media img {
        max-width: 80%;
        margin: 0 auto;
        display: block;
    }

    .wp-block-media-text__content {
        text-align: center;
    }
}


/* animations */
.slide-in-fwd-center {
    -webkit-animation: slide-in-fwd-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation slide-in-fwd-center
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-center {
    0% {
        -webkit-transform: translateZ(-1400px);
        transform: translateZ(-1400px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        opacity: 1;
    }
}


@keyframes first-pre-bulle-anim {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes second-pre-bulle-anim {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes third-pre-bulle-anim {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bulle-anim {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}



/* 
 * Mesures shortcode style
 */
.adweb-mesures-container {
    margin: 2rem 0;

    .adweb-mesures-souscategories {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 2px solid var(--color-gris);

        @media screen and (max-width: 768px) {
            flex-direction: column;
        }

        .adweb-btn-container {
            flex: 1;
            padding: 0.5rem 0;

            &.right {
                text-align: right;

                @media screen and (max-width: 768px) {
                    text-align: left;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            .btn-filtre-mesure {
                background-color: transparent;
                color: var(--color-black);
                font-size: 1rem;
                text-transform: uppercase;

                @media screen and (max-width: 768px) {
                    display: block;
                    padding: 0.5rem 0;
                }

                &.selected {
                    font-weight: 600;
                    color: var(--color-bleuturquoise);
                }
            }
        }
    }

    .adweb-mesures-grid {
        position: relative;
        margin: 1rem 0;

        .adweb-mesures-viewport {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;

            @media screen and (max-width: 1200px) {
                width: 100%;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
            }

            @media screen and (max-width: 768px) {
                width: 100%;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
            }

            .adweb-mesures-track {
                display: inline-flex;
                gap: 30px;
                transition: transform 0.35s;

                @media screen and (max-width: 768px) {
                    gap: 15px;
                }
            }

            article.adweb-mesures-content {
                position: relative;
                padding: 0.25rem 0.25rem 2rem 0.25rem !important;
                margin: 0;
                border: 1px solid var(--color-bleuturquoise);
                width: 380px;
                min-width: 380px;

                @media screen and (max-width: 1200px) {
                    max-width: 44vw;
                    width: 44vw;
                    min-width: 44vw;
                    scroll-snap-align: start;
                }

                @media screen and (max-width: 768px) {
                    max-width: calc(85vw);
                    width: calc(85vw);
                    min-width: calc(85vw);
                    scroll-snap-align: start;
                }

                .adweb-mesures-image {
                    margin: 0 0 0.5rem 0;
                    padding: 0;

                    a {
                        padding: 0;
                        margin: 0;

                        img {
                            padding: 0;
                            margin: 0;
                            border-radius: 0;
                        }
                    }
                }

                .adweb-mesures-texte {
                    h2 {
                        padding: 0;
                        margin: 0;
                        font-size: 1.25rem;
                        line-height: 1.35rem;
                        color: var(--color-bleufonce)
                    }

                    p {
                        padding: 0.5rem 0;
                        font-size: 0.85rem;
                        line-height: 1.05rem;

                        &.date {
                            display: inline-block;
                            background-color: var(--color-gris);
                            color: var(--color-black);
                            font-size: 0.75rem;
                            line-height: 0.75rem;
                            font-weight: 100;
                            padding: 0.4rem 0.75rem 0.25rem 0.75rem;
                            border-radius: 26px;
                            text-transform: lowercase;
                            margin: 0.5rem 0;
                        }
                    }

                    .read-more {
                        width: 100%;
                        position: absolute;
                        right: 0.25rem;
                        bottom: 0rem;
                        text-align: right;
                    }
                }
            }
        }

        .arrow {
            position: absolute;
            top: calc(50% - 12px);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 24px;
            height: 48px;
            font-size: 1.25rem;
            font-weight: 900;
            line-height: 1.50rem;
            cursor: pointer;
            color: #fff;
            border-radius: 100%;
            background-position: center center;
            background-repeat: none;
            background-size: cover;
            opacity: 0.15;
            transition: opacity 0.25s ease-in-out;

            @media screen and (max-width: 1199px) {
                display: none;
            }

            &:hover {
                opacity: 1;
            }

            &.right {
                right: 12px;
                background-image: url(../imgs/ico-arrow-right-hover.svg);
            }

            &.left {
                left: 12px;
                background-image: url(../imgs/ico-arrow-left-hover.svg);
            }
        }
    }
}


/**
 * nav-links
 */
/* --- Pagination moderne --- */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 3rem auto;
    padding: 1rem 0;
    max-width: 600px;
    position: relative;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Liens numérotés */
.nav-links .page-numbers {
    font-size: 0.85rem;
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
    padding: .5rem .8rem;
    border-radius: 6px;
    color: var(--color-black);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
}

.nav-links .page-numbers:hover {
    background: var(--color-violet);
    color: var(--color-white);
}

/* Page courante */
.nav-links .page-numbers.current {
    background-color: var(--color-bleuturquoise);
    color: var(--color-white);
    font-weight: 600;
    border-radius: 8px;
}

/* Points de suspension (...) */
.nav-links .page-numbers.dots {
    background: none;
    color: $color_grismoyen2;
}

/* Précédent / Suivant */
.nav-links .prev,
.nav-links .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: .6rem 1rem;
    background: none;
    color: $color_grismoyen2;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease;
}

.nav-links .prev:hover,
.nav-links .next:hover {
    color: $color_white;
}

/* Position extrémités */
.nav-links .prev {
    left: 0;
}

.nav-links .next {
    right: 0;
}

/* Responsive */
@media (max-width: 480px) {
    .nav-links {
        font-size: 1rem;
        gap: .3rem;
    }

    .nav-links .prev,
    .nav-links .next {
        position: static;
        transform: none;
        order: -1;
        /* les place avant les numéros */
    }
}