/*
Theme Name: Ecorce
Text Domain: Ecorce
Template: blankslate
*/

/* FONT-FACES */

@font-face {
    font-family: 'Antagometrica';
    src: url('assets/fonts/antagobd-webfont.woff2') format('woff2'),
        url('assets/fonts/antagobd-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Antagometrica';
    src: url('assets/fonts/antagolt-webfont.woff2') format('woff2'),
        url('assets/fonts/antagolt-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Antagometrica';
    src: url('assets/fonts/antagorg-webfont.woff2') format('woff2'),
        url('assets/fonts/antagorg-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* RESET */

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

* {
    margin: 0;
    padding: 0;
}

ul[role='list'],
ol[role='list'] {
    list-style: none;
}

html:focus-within {
    scroll-behavior: smooth;
}

a:not([class]) {
    text-decoration-skip-ink: auto;
}

img,
picture,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
}

input,
button,
textarea,
select {
    font: inherit;
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body,
html {
    /*height: 100%; */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* INIT */

:root {
    --primary: #3f5c58;
    --secondary: #f6a019;
    --third: #595b3B;
    --lighter: #b2b795;
    --accent: #162c29;
    --difference: #91BBB3;
    --bg: #f6efe4;
    --sable: #E5D6BF;
    --mw: 60rem;
    --ratio: 1.61;
    --spacer: 2rem;
    --radius: .5rem;

}

html {
    font-size: clamp(16px, 1.55vw, 24px);
    /*font-size: 24px;*/
    overflow-x: hidden;
}

body {
    color: var(--primary);
    font-family: "Antagometrica", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    background: var(--bg);
}

@media screen and (max-width: 991px) {
    :root {
        --box-width: 16;
    }
}

/*

body:before {
    content: "";
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 31rem;
    opacity: 0.2;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    filter: invert(1) grayscale(1);
    z-index:-1;
}

*/

::selection {
    background-color: var(--secondary);
    color: var(--bg);
}

/* TYPE */

p {
    font-size: .85rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    font-weight: 300;
}

.content ul,
ol,
li {
    margin-bottom: 1rem;
    line-height: 1.5;
}

a {
    color: var(--primary);
}

a:hover {
    color: var(--secondary);
}


h1 {
    /* font-size: calc(2 * var(--ratio) * 1rem); */
    font-size: clamp(2.2rem, 8vw, 7rem);
    font-weight: 500;
    line-height: 1.2;
    font-family: "Host Grotesk", sans-serif;

}

h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    line-height: 1.2;
    margin-bottom: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    font-family: "Host Grotesk", sans-serif;

}

.subtitle {
    color: var(--primary);
    font-size: .8rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1.2px;
    margin-bottom: 0.7rem;
    display: block;
}

.text__col {
    columns: 2;
    padding-left: 12.5%;
    margin-top: 2.7rem;
}

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

    .text__col {
        columns: 1;
        padding-left: 0;
    }
}

/* GLOBAL LAYOUT */

section {
    padding: 4rem 0;
    position: relative;
}

.wp-block-group__inner-container,
.ctn {
    max-width: var(--mw);
    margin: 0 auto;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.row>* {
    flex: 1;
}

section:not(:has(.ctn)) {
    padding: 2rem 1rem;
}

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

    .wp-block-group__inner-container,
    .ctn {
        padding: 0 1rem;
    }

    .hero .ctn {
        display: flex !important;
        align-content: center;
        flex-direction: column;

    }

    .hero {
        min-height: auto;
        padding: 5rem 0 0;
    }
}

/* COMPONENTS */

button,
.btn,
.wp-block-button__link,
input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: transparent;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.5rem 1.1rem;
    transition: all .15s;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    /* color: var(--bg) !important; */
    border-radius: 2rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    letter-spacing: .1rem;
}

button:hover,
.btn:hover,
.wp-block-button__link:hover,
input.wpcf7-form-control.wpcf7-submit.has-spinner:hover {
    background: var(--secondary);
    color: var(--bg);
    border: 1px solid var(--secondary);
    transition: all .25s ease;
}


.leaf img {
    border-radius: 2rem 0;
}

.sm {
    padding: 0 4vw;
}



/* GUTENBERG COMPONENTS */



.wp-block-details {
    box-sizing: border-box;
    border-bottom: 1px solid #DBE2EB;
    padding: 2.5rem 0;
}

.mission__acc {
    padding: 1.5rem 0;
}

details.missions__acc:first-of-type {
    padding-top: 0;
}

details summary {
    font-size: 2rem;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
    padding: 1rem 0;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
    padding: 0;
    font-weight: 600;
}

details summary h2,
.mission__acc h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    display: none;
}


.wp-block-details {
    box-sizing: border-box;
    border-bottom: 1px solid #ffffff38;
    padding: 1.5rem 0;
}

.wp-block-details {
    box-sizing: border-box;
    border-bottom: 1px solid var(--secondary);
    padding: 1.5rem 0;
}


.col-reverse {
    flex-direction: row-reverse;
}

.center {
    text-align: center;
    flex-wrap: wrap !important;
}

h2.wp-block-heading {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.content ul li {
    /* list-style-position: inside; */
    margin-bottom: .5rem;
    list-style: "➔" inside;
    padding-left: 1rem;
    font-size: .85rem;
}


.content ul li:before {
    content: "";
    margin-left: .35rem;
}


.content ul li::marker,
.content ol li::marker {
    color: var(--secondary);
    font-weight: 600;
}

details summary {
    font-size: 2rem;
    line-height: 1.2;
    list-style: none;
    cursor: pointer;
    /*padding: 1rem 1rem 0 0!important;*/
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
    padding: 0;
    font-weight: 600;
    transition: all .45s ease-in-out;
}

details summary h2 {
    transition: all .35s ease-in-out;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::marker {
    display: none;
}

details summary:hover {
    transform: translateX(.5rem);    
}


details summary::after {
    content: '';
    width: 1rem;
    height: 1rem;
    background-image: url('data:image/svg+xml,<svg data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 7"><path d="m.5.5 6 6 6-6" style="fill:none;stroke:%233f5c58;stroke-linecap:round;stroke-linejoin:round"/></svg>');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    right: 10px;
    top: 10px;
    transition: transform .3s .1s cubic-bezier(.165, .84, .44, 1);
}

details[open] summary::after {
    transform: rotate(180deg);
}

.wp-block-details {
    box-sizing: border-box;
    border-bottom: 1px solid #ffffff38;
    padding: 1.5rem 0;
}

.wp-block-details {
    box-sizing: border-box;
    border-bottom: 1px solid var(--secondary);
    padding: 1.5rem 0;
}

h3.wp-block-heading {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

h2.wp-block-heading.bigstroke {
    font-size: 2.5rem;
    position: relative;
    z-index: 1;
    margin: 4rem 0;
}

h2.wp-block-heading.bigstroke::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: -50vw;
    right: 0;
    bottom: 0;
    font-size: clamp(10rem, 20vw, 14rem);
    color: transparent;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* overflow: hidden; */
    width: 210vw;
    /* left: 0; */
    -webkit-text-stroke: 1px var(--secondary);
    text-stroke: 1px var(--secondary);
    z-index: -1;
    paint-order: stroke fill;
}

.full {
    width: 100vw;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 4rem 0;
    background-size: 50% !important;
}

.page-id-2 .full {
    padding: 2rem 0;
}

.full .wp-block-image img {
    height: 10rem;
}

hr.wp-block-separator {
    margin: 2rem 0;
    border: .5px solid lightgrey;
}

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

    h2.wp-block-heading.bigstroke::before {
        content: "";
        display: none;
    }

    h2.wp-block-heading.bigstroke {
        margin: 1rem 0;
    }

    .wp-block-image .alignright {
        float: right;
        margin: 0;
    }

    .full {
        background-image: none !important;
    }
}


.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img {
    border-radius: var(--radius);
}

.wp-block-gallery.has-nested-images figcaption {
    font-size: .8rem;
    margin-top: calc(var(--spacer) / 2);
}

/* HEADER */



header {
    background: var(--bg);
    color: var(--bg);
    padding: 1.6rem;
    position: fixed;
    width: 100%;
    z-index: 9;
    font-weight: 500;
    backdrop-filter: blur(80px);
    transition: all 0.3s ease-in-out;
}

@media screen and (min-width:991px) {
    
    header.scrolled {
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.025); 
        padding: 0.6rem 1.6rem;
    }
    
    header.scrolled .header__logo svg {
        /*width:9.5rem;*/
        
    }
}



header .ctn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
    position: relative;
    max-width: none;
}

.hero {
    /* min-height: 20rem; */
    /* height: 50vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 12rem 0 10rem;*/
    padding: 8rem 0 4rem;
    flex-direction: column;
}

.hero__image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 100%;
    z-index: -1;
    position: relative;
    max-width: none;
    width: 100%;
    /*filter: grayscale(1);*/
    mix-blend-mode: overlay;
    opacity: 0.6;
}

.hero__image img:hover {

    opacity: 1;
}


.hero__image svg {
    max-width: none;
}

.hero__image {
    position: absolute;
    right: -2rem;
    top: -2rem;
    aspect-ratio: 1 / 1;
    width: clamp(30rem, 45vw, 40rem);
    z-index: -2;
    height: 100%;
    display: none;
}

.hero__desc {
    font-size: 1rem;
}

body:not(.single) .hero__image img {
    opacity: 1;
    /*overflow: visible;
    border-radius: 0;*/
}


body:not(.single) .hero__image {
    width: clamp(30rem, 40vw, 40rem);
}



.hero .ctn {
    width: 100%;
}

.hero h1 {
    line-height: 1;
    /*font-size: clamp(2.2rem, 6vw, 4rem);*/
    /*font-size: clamp(2.2rem, 5vw, 3.3rem);*/
    font-size: clamp(2.2rem, 5vw, 2.5rem);
    text-align: left;
}

.hero p {
    font-size: 1rem;
    margin: .5rem 0 0 0;
    text-align: left;
}

header a {
    color: var(--bg);
}

header img,
.header__logo svg {
    /*width: clamp(7rem, 12.5vw, 20rem);*/
    width: 10rem;
    transition: all 0.3s ease-in-out;

}

.light .logo__name {
    fill: var(--bg);
}

header img:hover {
    opacity: 0.8;
}

header.wide {
    background: none;
    border-bottom: 1px solid #253d914a;
}

header.wide ul li a {
    color: var(--primary)
}

header.wide ul li a:hover {
    color: var(--secondary)
}

/*.breadcrumb {

    font-size: 0.9rem;
    display: flex;
    gap: .4rem;
    color: var(--lighter);
    justify-content: flex-start;
    margin-bottom: 0.4rem;
    text-transform: uppercase;

}

.breadcrumb span,
.breadcrumb a {
    color: var(--secondary);
    padding: .15rem .35rem;

}

span.breadcrumb__separator {
    color: var(--secondary);
    padding: 0;
    font-size: .5rem;
    display: contents;
}

.breadcrumb a {
    text-decoration: none;
} */

svg.hero__arrow {
    display: none;
}

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

    svg.hero__arrow {
        position: absolute;
        bottom: 2rem;
        left: 2rem;
        width: 1rem;
        display: block;
    }


    .hero .ctn {
        align-items: flex-start;
    }

    .hero {
        min-height: auto;
        padding: 7rem 0 3rem;

    }

    header {
        padding: 1rem 0;
        background: var(--primary);
    }

    header .logo__name {
        fill: var(--bg);
    }

    header .ctn {
        padding: 0 1rem;
    }

    .hero__image {
        left: -15rem;
        top: -8rem;
        display: none;
    }

    .intro-circle {
        opacity: .26;
        width: 62.5vw;
        height: 62.5vw;
        margin-right: -30% !important;
    }
}

/* TOPBAR */

.topbar {
    background: var(--accent);
    color: var(--bg);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-size: .65rem;
    font-weight: 600;
    padding: .5rem 0;
}

.topbar .ctn {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
}

.topbar__block {
    display: flex;
    align-items: center;
}

.topbar__block svg {
    margin-left: .3rem;
    transform: translateY(-1px);
}

.topbar a {
    text-decoration: none;
    color: var(--bg);
}

/* NAV */

nav ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;
}


.page-id-2 nav a {
    color: var(--bg);
}


nav a, a.header__cta {
    text-decoration: none;
    color: var(--primary);
    text-transform: uppercase;
    font-size: .75rem;
    display: flex;
    align-items: center;
   font-family: "Host Grotesk", sans-serif;
    transition: all .45s ease-in-out;
}

nav li, a.header__cta {
    margin-bottom: 0 !important;
    padding: .75rem 1rem;
    display: flex;
}

a.header__cta {
    color: white;
    margin-left: 0!important;
    padding: .75rem 1.5rem;
}

nav ul a:hover {
    color: var(--secondary);
}


a.header__cta {
    background-color: var(--secondary);
    border-radius: 2rem;
    margin-left: .5rem;
    transition: all .45s ease;
}


 a.header__cta:hover {
    background: var(--primary);
}


ul.sub-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f6f2eb;
    color: var(--bg);
    margin-top: 2rem;
    position: absolute;
    display: none;
    border-radius: .25rem;
    box-shadow: 0 7px 20px #00000017;
    min-width: max-content;
}


ul.sub-menu li {
 padding: .35rem 1rem
}

ul.sub-menu a {
    color: var(--primary);
    text-transform: none;
    font-weight: 400;
}

ul.sub-menu li:first-child {
    padding-top: 1rem;
    
}

ul.sub-menu li:last-child {
    padding-bottom: 1rem;
}

ul.sub-menu a:hover {
    color: var(--difference);
}

.menu-item-has-children>a::after {
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5c58' stroke-width='1' stroke-linecap='square' stroke-linejoin='bevel'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: .3rem;
    transition: transform 0.15s ease;
}


.page-id-2 .menu-item-has-children>a::after {
    content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='square' stroke-linejoin='bevel'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
}

.logo__none {
    fill: none
}
    
    .home header {
        background: transparent;
        color: var(--bg);
        padding: 1.6rem;
        position: fixed;
        width: 100%;
        z-index: 9;
        font-weight: 500;
        backdrop-filter: blur(0px);
    }   


    .home header.scrolled {

    background: var(--bg);
    padding: 0.6rem 1.6rem;


    .logo__name {
        fill: var(--primary);
    }

    nav a {
        color: var(--primary);
    }

    .menu-item-has-children>a::after {
        content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5c58' stroke-width='1' stroke-linecap='square' stroke-linejoin='bevel'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
    }

}

@media screen and (max-width:991px) {
    .home header {
        padding: 1rem 0;
    }

    .home header.scrolled {
        background: var(--primary);
        padding: 1rem 0;
    }

    .home .logo__name {
        fill: var(--bg)!important;
    }
}

.home .logo__name {
    fill: var(--bg);
    transition: all .3s ease-in-out;
}

.page-id-2 .logo__and {
    fill: var(--bg);
    opacity: .5;
}

.logo__name {
    fill: var(--primary)
}

.logo__and {
    fill: var(--primary);
    opacity: .5;
}

.logo__highlight {
    fill: var(--secondary);
}

.menu-item-has-children.active>a::after {
    transform: rotate(180deg);
}

.menu__button {
    height: 2rem;
    display: none;
}

.menu__icon svg {
    width: 2rem;
}

.menu__icon .line {
    stroke: var(--secondary);
}

.menu__icon .cross {
    display: none;
}

.open .menu__icon .line {
    display: none;
}

.open .menu__icon .cross {
    display: block;
}

.open path.cross {
    stroke: var(--secondary);
}

.nav__right {
    display: none;
}

/* a.header__cta {
    background: var(--secondary);
    text-transform: uppercase;
    padding: 1rem 2rem;
    color: var(--bg);
    position: relative;
    text-decoration: none;
    font-size: .8rem;
    text-transform: uppercase;
    border-radius: 3.2rem;
    padding: .8rem 1.6rem;
}

a.header__cta:hover {
    background: #cc610a;
    transition: all .25s ease;
} */

.current-menu-item a,
.current_page_item a {
    color: var(--secondary);
}


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

    .header__cta {
        display: none;
    }

    #menu {
        display: none;
    }

    .menu__button {
        height: 1.5rem;
        display: block;
        cursor: pointer;
    }

    .nav__right {
        height: 100dvh;
        position: absolute;
        z-index: 1;
        background: var(--accent);
        top: 0;
        width: 100%;
        align-content: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }


    .nav__right.open {
        display: flex;
        z-index: 2;
        left: 0;

    }

    .nav__right ul {
        list-style-type: none;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .menu-item-has-children>a::after {
        content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1' stroke-linecap='square' stroke-linejoin='bevel'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
        display: inline-block;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: .3rem;
        transition: transform 0.15sease;
    }

    .nav__right li {
        margin-bottom: 0;
        padding: 0;
    }

    .nav__right a {
        text-decoration: none;
        text-transform: uppercase;
        font-size: clamp(1rem, 4vw, 1.8rem);
        display: flex;
        align-items: center;
        justify-content: center;

    }

    ul.sub-menu li {
        padding: 0;
    }

    ul.sub-menu a {
        color: var(--lighter);
    }

    ul.sub-menu li:first-child {
        padding-top: .5rem;
        
    }
    
    ul.sub-menu li:last-child {
        padding-bottom: .5rem;
    }

    header.wide .nav__right a {
        color: var(--bg)
    }

    a.header__cta {
        display: none;
    }

    .topbar {
        display: none;
    }

    ul.sub-menu {
        width: 100vw;
        position: relative;
        display: none;
        background: none;
        margin-top: 0;
        box-shadow: none;
        gap: .25rem;
    }

}

/* FOOTER */


footer {
    background: var(--accent);
    color: var(--bg);
    padding: 3rem 0 1.5rem;
    font-size: .7rem;
}

footer h3 {
    font-size: .8rem !important;
    text-transform: uppercase;
}


.footer-widget-1 a {
    text-decoration: underline;
    text-underline-offset: 0.1rem;
    text-decoration-thickness: 1px;
}


footer .separator {
    width: 100%;
    margin: 3rem 0 1rem;
}


@media screen and (min-width:991px) {

    footer .row .footer__column:last-child {
        text-align: right;
    }
}

footer li {
    font-size: .7rem;
    margin: 0;
    list-style: none;
}

footer .row {
    align-items: flex-start;
}

footer .row p {
    align-items: flex-start;
    font-size: .7rem;
}

footer a {
    color: var(--bg);

}

footer p {
    font-size: .8rem;
}

.footer__cta {
    text-align: center;
    padding: 4rem 0;
    position: relative;
    background-image: url('https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/squirrel.jpg');
    background-size: cover;
    color: var(--bg);
}


.footer__cta::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--third);
    opacity: 0.8;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.footer__cta .ctn {
    position: relative;
    z-index: 1;
}

.footer__cta svg {
    margin-bottom: -1px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    fill: var(--bg);
}

.footer__cta ul {
    list-style-type: none;
    margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.footer__cta h2 {
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    text-transform: unset;
    font-family: 'Host Grotesk' !important;
    color: var(--bg) !important;
}

.footer__cta li {
    min-height: 17rem;
    background: var(--red);
    width: calc(var(--mw) / 4 - 1.25rem);
    padding: 2.5rem 1rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    transition: all .25s ease;
}

.footer__cta .btn {
    background: none;
    display: inline-block;
    color: var(--bg);
    border: 1px solid var(--bg);
    padding: .5rem 2.25rem;
    font-weight: 500;
}

.footer__cta .btn:hover {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    transition: all .25s ease;
}

/* .footer__cta a {
    text-decoration: none;
    color: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
} */

.footer__cta h3 {
    padding: 0 1rem;
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 500;
}


.footer__cta p {
    margin: 0 0 1.5rem;
    font-weight: 400;
}

.footer__info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem;
    font-weight: 400;
    margin-bottom: 4rem;
    text-align: center;
}

.footer__info svg {
    margin-top: .5rem;
    width: 6rem;
}

.footer__info li {
    list-style-type: none;
    margin-bottom: .5rem;
}



.footer__sm {
    text-align: center;

}

.footer__sm ul {
    display: flex;
    justify-content: center;
    gap: .75rem;
    list-style-type: none;
    margin-top: .5rem;
}

.footer__sm svg {
    fill: vvar(--bg);
}


.footer__sm svg:hover {
    fill: var(--secondary);
    transform: scale(1.05);
}

.copyright {
    text-align: center;
    margin-top: 2rem;
    font-size: .7rem;
    border-top: 1px solid #343434;
    padding-top: 2rem;

}

.footer__menu {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin-top: 2rem;
    font-size: .85rem;
    flex-direction: row;
    gap: 1rem;
}

.partners-list {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
}

.partners-list img {
    height: 3rem;
}

.partners-list a:first-child img {
    transform: scale(1.5);
}

.footer__menu a {
    text-decoration: none;
}

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

    .footer__cta ul {
        justify-content: center;
    }

    .footer__column {
        width: 100%;
    }

    footer .row {
        gap: 2rem;
        text-align: center;
    }
}



/* HOMEPAGE */


.page-id-2 .hero {
    height: 84dvh;
    padding: 0;
    background: var(--accent);
    color: var(--bg);
    position: relative;
    overflow: hidden;
    padding-bottom: 2rem;
}

body.page-id-2:has(.header__banner) .hero {
    margin-top: -6.3rem;
}

body.home:has(.header__banner) header {
    position: sticky;
    top: 0;
}

.page-id-2 .hero__content {
    margin: 0;
    max-width: 80%;
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 0 auto;
    color: white;
    margin-top: var(--spacer);
}

.page-id-2 .hero__content p {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.page-id-2 .hero__content .btn {
    background: none;
    display: inline-block;
    color: var(--bg);
    border: 1px solid var(--bg);
    padding: .5rem 2.25rem;
    font-weight: 500;
}

.page-id-2 .hero__content .btn:hover {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    transition: all .25s ease;
}


.page-id-2 .hero h1 {
    font-size: 5rem;
    text-align: center;
    font-weight: 300;
    letter-spacing: 10px;
    text-transform: uppercase;
}

.page-id-2 .hero__content span {
    color: var(--secondary);
}

.page-template-page-homepage .embla__container {
    margin-top: 0;
}

.hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    z-index: 1;
}

.hero__word {
    display: inline-block;
    opacity: 0;
    position: relative;
    transform: translateX(10px);
    display: inline-block;
    color: white !important;
}

.hero__word.active {
    animation: fadeSlide 2.5s ease-in-out infinite;
}

@keyframes fadeSlide {
    0% {
        opacity: 0;
        transform: translateX(10px);
    }

    20% {
        opacity: 1;
        transform: translateX(0);
    }

    80% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}


.header__banner {
    background: var(--difference);
    padding: .2rem;
    text-align: center;
}

.header__banner p {
    margin: 0;
    color: white;
    font-weight: 500;
}

.hero__content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
}

.page-template-default .hero__content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: .5rem;
}

section:has(.slider) {
    background-image: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/home-kleft.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    padding-bottom: 2rem;
}


@media screen and (min-width:991px) {

    .page-template-default .hero__content {
        padding-right: 30%;
    }

}

@media screen and (max-width:991px) {
    .page-id-2 .hero {
        height: 100dvh;
    }


    .page-id-2 .hero h1 {
        font-size: 3.7rem;   
}
}

/*.hero__sticker:hover .hero__sticker-icon {
    transform: rotate(10deg); 
}*/




/* DEFAULT ARTICLE */





/* SINGLE RESSOURCES */

.hero__back, .hero__breadcrumb {
    text-decoration: none;
    margin-bottom: calc(var(--spacer) / 3);
    display: inline-block;
    font-size: .7rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--difference);
    letter-spacing: 2.2px;
    display: flex;
    gap: .8rem;
    align-items: center;
    align-content: center;
}

.hero__breadcrumb svg {
    transform: translateY(-2px);
    stroke: var(--primary)!important;
}

.hero__breadcrumb a {
    text-decoration: none;
    color: var(--primary);
}

.hero__breadcrumb :not(a) {
    text-decoration: none;
    color: var(--difference);
}

.hero__back {
    display: none;
}

a.hero__back::before {
    content: "";
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="9"><path fill="%2391BBB3" d="M9 0v4h16.5v1H9v4L0 4.5 9 0Z"/></svg>');
    width: 1.25rem;
    height: 0.45rem;
    background-repeat: no-repeat;
}

a.hero__back:hover::before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="9"><path fill="%23f6a019" d="M9 0v4h16.5v1H9v4L0 4.5 9 0Z"/></svg>');
}

.hero__back svg {
    display: none;
    width: 0.9rem;
    stroke: var(--difference);
}

.fiche {
    margin-top: 2rem;
}

.fiche .row {
    align-items: flex-start;
}

.fiche h1 {
    line-height: 1.1;
    font-size: clamp(3rem, 8vw, 4rem);
    position: relative;
    display: inline-block;
}


.fiche h1 sup {
    font-size: 1.2em;
    position: absolute;
    right: -0.7em;
    font-family: monospace;
    bottom: -0.1em;
    color: var(--secondary);
}


.fiche__left {
    width: 50%;
}

.fiche__left ul {
    list-style-type: none;
    display: flex;
    margin: 1.5rem 0;
    flex-wrap: wrap;
    gap: .5rem .5rem;
}

/* ul.fiche__attributes li {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}*/

.fiche__attributes li {
    border: 1px solid var(--secondary);
    border-radius: 2rem;
    padding: .25rem .75rem;
    font-weight: 200;
    font-size: 0.8rem;
}

/*
 ul.fiche__attributes li strong {
    font-size: 0.7em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--secondary);
    padding: 0.2em 0.7em;
    border-radius: 1rem;
}*/

ul.fiche__icons {
    gap: 1.5rem;
}

.fiche__icons li {
    position: relative;
}

.fiche__icons img {
    position: absolute;
    width: 1rem;
    bottom: -.25rem;
    right: -0.4rem;
}

.fiche__right {
    width: 40%;
    position: sticky;
    top: 2rem;
}

.fiche__right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fiche__image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: block;
}

.fiche__thumbnails {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    border-radius: 1rem;
}

.fiche__thumbnails .fiche__image {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.1s ease-in-out;
    opacity: 0.65;
    border-radius: .65rem;
}

.fiche__thumbnails .fiche__image:hover {
    transform: scale(1.1);
    opacity: 1;
}

.hidden {
    display: none;
    /* Cacher les éléments qui ne sont pas visibles au départ */
}

.fiche__right img {
    width: 100%;
    height: 29rem;
    object-fit: cover;
    border-radius: 2rem;
}

.content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    text-decoration-color: var(--secondary);
    color: var(--secondary);
}

.page-template-page-solutions .hero lottie-player {
    margin-top: -4rem;
}





@media screen and (min-width: 991px) {

    .single h1 {
        text-align: left;
        max-width: 70%;
        margin-bottom: 0.4rem;
        font-weight: 500;
        text-wrap: balance;
    }

    .hero {
        padding: 8rem 0 2rem;
    }

    /*.archive .hero {
        padding: 10rem 0 4rem;
    }*/

    .single .hero img {
        filter: none;
    }

    .single .breadcrumb {
        justify-content: left;
        /*margin-bottom: 1.25rem;*/
        transform: rotate(0);
    }

    .single .content .ctn {
        padding-right: 20%;
    }



    .page-template-page-solutions .hero {
        padding: 4rem 0 2rem;
    }




}

img.visible {
    /* display:block!important; */
}

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

    .fiche__right {
        width: 100%;
    }

    .page-template-page-solutions .hero .ctn {
        flex-direction: column-reverse;
        text-align: center;
    }


    .page-template-page-solutions h1 {

        text-align: center;
    }

}


.page-template-default .content .ctn {
    max-width: 960px;
    position: relative;
}


/*

.page-id-2 .hero p {
    font-size: 2.2rem;
    margin: 0;
    line-height: 1;
    margin-bottom: 1.2rem
}

.page-id-2 .hero h2 {
    line-height: 1.1;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: .5rem;
}

.page-id-2 .cards__list {
    margin-top: 2rem;
}

.page-id-2 .listing {
    padding-top: 4rem;
}

.see-all {
    text-decoration: none;
    display: flex;
    gap: .5rem;
    font-size: 1.2rem;
}

.see-all svg {
    width: .6rem

}

*/

.fw {
    min-height: 60vh;
    display: flex;
    align-items: center;
    margin: 2rem 0 0 0;
    flex-wrap: wrap;
    gap: 2rem;
    overflow: hidden;
    background: var(--primary);
    position: relative;
    padding: 4rem;
}

.fw img {
    width: 50%;
    /* border-radius: 2rem; */
    position: absolute;
    z-index: -1;
    right: 0;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.fw .ctn>div {
    width: 50%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    color: var(--bg);
    padding-right: 5rem;
}

.fw .btn:hover {
    -webkit-box-shadow: inset 0px 0px 0px 2px var(--secondary);
    -moz-box-shadow: inset 0px 0px 0px 2px var(--secondary);
    box-shadow: inset 0px 0px 0px 2px var(--secondary);
}

/* .fw li {
    width: 50%;
    display: inline-block;

    font-weight: 500;
    padding: .5rem 1.25rem;
} */

.fw h3 {
    font-size: 3rem;
    font-weight: 400;
    color: var(--bg);
    line-height: 1;
}

.fw h2 {
    margin-bottom: 2rem;
}

.fw p {

    font-weight: 400;
}

.fw ul a {
    color: var(--bg);
}

.fw.invert ul {
    all: unset;
    text-align: left;
    padding-right: 20%;
    display: flex;
    flex-direction: column;
}


.fw.invert img {
    left: unset;
    right: -2rem;
}

.fw__list h3 {
    font-size: 1.8rem;
    color: var(--primary);
    margin-bottom: .4rem;
}

.fw__list p {
    font-size: 1rem;
    font-weight: 300;
    margin-bottom: 1rem;
    padding-right: 10%;
}

.fw__list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 60%;
}

.fw__list svg {
    width: 8rem;
}

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

    .fw .ctn>div,
    .fw img {
        width: 100%;
        position: relative;
        margin: 0;
        left: 0;

    }


    .fw .ctn>div {
        padding: 0 0 4rem 0;
    }

    .fw li {
        width: 100%;
    }

    .fw.invert ul {
        padding-right: 0;
    }

    .fw.invert img {
        left: unset;
        right: 0rem;
    }

    .fw {
        padding: 0;
    }
}

/* REFERENCES */

.hero:has(.embla) {
    padding-bottom: 0;
}

.hero__image-single {
    display: flex;
}

.hero__image-single img {
    width: calc(100vw - 1rem);
    max-width: none;
    margin-top: 2rem;
    aspect-ratio: 2.75;
    object-fit: cover;
    border-radius: var(--radius);
}

.taxonomies-filter {
    display: flex;
    flex-direction: column;
    margin-bottom: calc(var(--spacer) / 2);
    gap: .4rem;
    width: 100%; /* Permet au conteneur de prendre toute la largeur */
    overflow-x: auto; /* Active le scroll horizontal */
    white-space: nowrap; /* Empêche les éléments de passer à la ligne */
    padding-bottom: 0.5rem; /* Ajoute un peu d'espace en bas pour éviter que le scroll soit masqué */
    -webkit-overflow-scrolling: touch; /* Améliore le défilement sur iOS */
}


.taxonomy-group {
    position: relative;
    display: inline-block; /* Permet aux groupes de rester sur la même ligne */
        white-space: nowrap; /* Empêche le retour à la ligne */
}

.taxonomy-group:not(:last-child)::after {
    content: "";
    height: 1px;
    background: var(--lighter);
    width: 2rem;
    display: block;
    position: absolute;
    left: .1rem;
    bottom: 0;
}

.taxonomy-group h3 {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

ul.taxonomy-list {
    list-style: none !important;
    padding: 0;
    display: flex;
    gap: .4rem;
    margin-bottom: 0;
    flex-wrap: nowrap; /* Empêche la liste de se casser sur plusieurs lignes */
    overflow-x: auto; /* Active le scroll si besoin */
    white-space: nowrap;
    display: flex;
}

ul.taxonomy-list>li {
    position: relative;
    list-style: none;
    padding-left: 0;
    font-size: .6rem;
    text-transform: uppercase;
    font-weight: 400;
    flex: 0 0 auto; /* Empêche les éléments de rétrécir */

}

ul.taxonomy-list>li::before {
    content: "";
    margin: 0;
}

.taxonomy-list input[type="radio"] {
    display: none;
}

.taxonomy-list label {
    display: inline-block;
    padding: 0.175rem 1.25rem;
    border: 1px solid var(--primary);
    border-radius: 4px;
    cursor: pointer;
    /* background-color: #f9f9f9; */
    transition: background-color 0.3s, color 0.3s;
    border-radius: 2rem;
    letter-spacing: 1.4px;
}

.taxonomy-list:has(input[type="radio"]:checked) label {
    color: var(--lighter);
    border-color: var(--lighter);
}

.taxonomy-list input[type="radio"]:checked+label {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.taxonomy-list label:hover {
    background-color: #e6e6e6;
}

.ref__infos {
    background: var(--difference);
    padding: var(--spacer) calc(var(--spacer) / 1.5);
    color: white;
    border-radius: .5rem;
    font-size: .8rem;
    text-align: left;
    margin-bottom: var(--spacer);
}


.ref__infos tr>* {
    flex: 1 1 50%;
}

.ref__infos tr:first-of-type {
    padding: 0 0 .5rem;
}

.ref__infos tr {
    display: flex;
    padding: .5rem 0;
    border-bottom: 1px solid white;
}

.ref__infos th {
    font-weight: 600;
    text-transform: uppercase;
}

.ref__infos td {
    font-weight: 400;
}


nav.pagination {
    display: none;
}

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

    .single-references {
        overflow-x: hidden;
    }

    .hero:has(.hero__image-single) {
        padding-bottom: 1rem;
    }

    .ref__wrapper {
        padding-top: 2rem;
    }
    
    .taxonomies-filter {
        /*display: none;*/
    }

    .ref__card {
        grid-row-end: span 10!important;
    }
}


@media screen and (min-width:991px) {
    .single-references .content .ctn {
        padding-right: 0;
        display: flex;
        align-items: flex-start;
        gap: 2rem;
        flex-direction: row-reverse;
    }

    .ref__content {
        width: 60%;
    }

    .ref__infos {
        width: 40%;
        position: sticky;
        top: 7rem;
    }

    #content:has(.ref__infos) {
        background-image: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/ref-right.svg);
        background-repeat: no-repeat;
        background-position: calc(100% + 3rem) 100%;
    }

}

.single-references .content h2 {
        color: var(--secondary);
        font-family: 'Antagometrica';
        font-size: .8rem;
        letter-spacing: 1.2px;
}

.single-references section:not(.related-posts) .ctn p+h2 {
    margin-top: var(--spacer);
}


/* REFERENCES INDEX */

.page-template-page-references main, .post-type-archive-references main {
    background-image: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/waves2.svg);
    background-size: 60%;
    background-position: 110% 7%;
    background-repeat: no-repeat;
}



.ref__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .75rem;
    grid-auto-rows: 1rem;
    box-sizing: border-box;
    position: relative;
}

.ref__card {
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    text-decoration: none;
    position: relative;
    grid-row-end: span 7;
    background:
        url('https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/waves.svg') no-repeat center bottom,
        var(--primary);
    background-size: cover, cover;
    font-family: "Host Grotesk", sans-serif;
}

.ref__card:nth-child(even) {
    background:
        url('https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/waves.svg') no-repeat center bottom,
        var(--lighter);
    background-size: cover, cover;
}

.ref__card:not(:has(img))::after {
    background: none;
}

.ref__card:not(:has(img)) {    
    grid-row-end: span 9!important;
}
.ref__card::after {
    content: "";
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 1;
    transition: background 0.25s ease-in-out;
}

.ref__card:hover::after {
    background: var(--secondary);
}

.ref__card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    height: 100%;
}

.ref__card svg {
    position: absolute;
    width: 1rem;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: 0.25s ease-in-out .15s;
    z-index: 3;
    transform: scale(.75) rotate(25deg);
}

.ref__card:hover svg {
    opacity: 1;
    transform: scale(1) rotate(0);
}

.ref__card:hover .ref__info {
    transform: scale(1) rotate(0);
    transform: translateY(-.25rem);

}



.ref__info {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    padding-right: var(--spacer);
    width: 100%;
    transition: 0.25s ease-in-out;
    transform: translateY(0);


}


@media screen and (max-width: 991px) {
    .ref__list {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

}

/* TEAM */

.page-template-page-team .hero p,
.page-template-page-intro-text .hero p {
    text-align: center;
}

.page-template-page-team h1,
.page-template-page-intro-text h1 {
    margin-bottom: var(--spacer);
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

.page-template-page-team h1:after,
.page-template-page-intro-text h1:after {
    content: "";
}

.page-template-page-team .hero__back,
.page-template-page-intro-text .hero__back {
    visibility: hidden;
}

.page-template-page-team hr,
.page-template-page-intro-text hr {
    height: 10rm;
    background: var(--primary);
    width: .05rem;
    height: 6.5rem;
    border: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 1rem;
}

.page-template-page-team hr::after,
.page-template-page-intro-text hr::after {
    content: "";
    width: .75rem;
    /* height: 1rem; */
    background: var(--bg);
    position: absolute;
    border-radius: 100%;
    border: .3rem solid;
    aspect-ratio: 1 / 1;
}

.hero__content {
    text-align: center;
}

@media screen and (min-width:991px) {
    .hero__content {
        max-width: 70%;
        margin: 0 auto;
    }
}

.team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.team__member {
    position: relative;
    border-radius: .25rem;
    overflow: hidden;
}

.team__member:nth-child(3n+1)::before {
    background: var(--secondary);
}

.team__member:nth-child(3n+2)::before {
    background: var(--difference);
}

.team__member:nth-child(3n)::before {
    background: var(--lighter);
}

.team__member::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: all .35s ease-in-out;
}

.team__member:hover::before {
    opacity: 1;
}

.team__member:hover .team__info {
    opacity: 1;
    transform: translateY(0);
}

.team__member svg {
    position: absolute;
    width: 1rem;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: all 0.25s ease-in-out .25s;
    z-index: 3;
    transform: scale(.75) rotate(25deg);
}

.team__member:hover svg {
    opacity: 1;
    z-index: 3;
    transform: scale(1.1) rotate(0);
}



.team__info {
    position: absolute;
    bottom: 0;
    color: white;
    padding: 1rem 2rem 1rem 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: all .25s ease-in-out .1s;
    transform: translateY(.5rem);
    /* background: var(--secondary); */
}

.team__info h3 {
    margin-bottom: .5rem;
    font-family: "Host Grotesk", sans-serif;
}

.team__info p {
    font-size: .8em;
    line-height: 1.4;
    margin: 0;
}

.team__modal:nth-child(3n+1) {
    background: var(--lighter);
}

.team__modal:nth-child(3n+2) {
    background: var(--secondary);
}

.team__modal:nth-child(3n) {
    background: var(--difference);
}

.team__modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    /*align-items: center;*/
    padding: 1rem;
    z-index: 1000;
    border: none;
    height: 100dvh;
}

.team__modal ul li::marker {
    color: var(--bg);
    font-weight: 600;
}

.modal__content {
    /* background: #fff; */
    padding: 2rem;
    border-radius: 8px;
    /*max-width: 500px;*/
    width: 100%;
    text-align: left;
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
}

.modal__content p {
    margin-bottom: 0.4rem;
    font-size: .8rem;
}

.modal__content h4 {
    text-transform: uppercase;
    font-size: .75rem;
}

.modal__content li {
    margin-bottom: 0!important;
    font-size: .8rem;
}

.separator {
    height: 0;
    background: white;
    width: 2rem;
    margin: calc(var(--spacer) / 1.5) 0;
    position: relative;
    border-top: 1px solid white;
}

.separator::after {
    content: "";
    width: .75rem;
    /* height: 1rem; */
    background: none;
    position: absolute;
    border-radius: 100%;
    border: .3rem solid;
    aspect-ratio: 1 / 1;
    right: -0.75rem;
    top: -0.375rem;
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9;
}

.modal__close svg {
    width: 3rem;
}


.modal__content p {
    margin-bottom: 0.2rem;
}

.modal__photo {
    width: 6rem;
    border-radius: 100%;
    margin-bottom: 1rem;
}

.modal__name {
    font-size: 2rem;
    margin-bottom: .2rem;
    line-height: 1;
    font-family: "Host Grotesk", sans-serif;
}

.modal__fonction {
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 700;
    font-family: "Host Grotesk", sans-serif;
}

.modal__description {
    font-size: 1rem;
    color: #333;
}


@media screen and (max-width: 991px) {
    .team {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));

    }

    .modal__content {
        /* background: #fff; */
        padding: 2rem 0;
    }
}


/* LISTING */

/* .archive .hero {
    padding: 8rem 0 0rem;
}


/* .page-template-page-db .hero {
    min-height: 0rem;
    padding: 4rem 0rem 2rem;
} */

.cards__list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: var(--spacer);
    margin-top: -8.5rem;
    z-index: 3;
    position: relative;
}

.cards__list>a {
    /* width: calc(25% - 1.75rem); */
    text-align: left;
    border-radius: var(--radius);
    text-decoration: none;
    /* transition: all .45sease-in-out; */
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    color: var(--primary);
    /* border: 1px solid var(--primary); */
    flex: 1;
    background: white;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.025); 
}

/* .cards__list>a::after {
    content:"";
    width: 2rem;
    height: 2rem;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--secondary);
} */


.cards__list>a img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    position: relative;
    inset: 0% auto auto 0%;
    overflow: hidden;

}

.cards__list>a:hover {
    /*transform: scale(1.04);
    box-shadow: 0 0 0 #000;
    transform: translate(4px, 4px);*/
    background: var(--secondary);
    color: var(--bg);
    border: 1px solid var(--secondary);

}

.cards__list>a:hover svg {
    fill: var(--bg);

}

.cards__list>a:hover .card__sub {
    color: var(--bg);
}

/*

.card:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .85)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0, rgba(0, 0, 0, 0) 100%); 
    z-index:-1;
    opacity: .7;
} */



.card__info svg {
    position: absolute;
    right: 1rem;
    top: 1rem;
    fill: var(--primary);
    width: 1rem;
    transition: all .25s ease;
}

.card__info {
    font-size: .9rem;
    /* margin-top: 13rem; */
    padding: 2.25rem 2.5rem 0 1.25rem;
}

.card__info p {
    font-size: .8rem;
    font-weight: lighter;
}



.card__name {
    text-transform: uppercase;
    font-size: 1rem;
    position: relative;
    line-height: 1.1;
    margin-bottom: .65rem;
    font-family: "Host Grotesk", sans-serif;
}

.card__sub {
    font-size: .6rem;
    font-weight: bolder;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 1rem;
    display: block;
    font-weight: 700;
    color: var(--difference);
    transition: all .5s ease;

}

.card__name sup {
    font-size: 1em;
    position: absolute;
    right: -1.25rem;
    font-family: monospace;
    bottom: .25rem;
}

.card__more {
    color: #333;
    margin-top: 1rem;
    font-size: .7rem;
    display: inline-block;
    font-weight: 600;
}

.highlight {
    color: var(--secondary);
}

.filter-form {
    padding: 1rem 0;
}

section.cards {
    padding: 1rem 0;
}

.listing__filters input[type="text"][name="s"] {
    border-radius: 2rem;
    border: none;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 2rem;
    font-weight: 200;
    box-shadow: 0rem 0rem 2rem #00000012;
    cursor: auto;
    background: #00000070;
    border: 2px solid rgba(255, 255, 255, 0);
    color: var(--bg);
}

.listing__filters input[type="text"][name="s"]:focus {
    outline: none;
    border: 2px solid var(--primary);
}

.listing__filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

}

.listing__select {
    position: relative;
}

.listing__filters select {
    font-weight: 500;
    padding: .65rem 1.3rem;
    border-radius: 2rem;
    border: 1px solid lightgray;
    color: var(--primary);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    width: 100%;
}

.listing__select::after {
    content: 'lol';
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 24px;
    /* Ajustez la taille selon vos besoins */
    height: 24px;
    /* Ajustez la taille selon vos besoins */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNCQUNFMUQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9ImJ1dHQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==');
    background-size: contain;
    background-repeat: no-repeat;
    color: var(--primary);
    /* Appliquer la couleur */
}

.listing__filters span {
    font-weight: 600;
    color: var(--secondary);
}

.listing__filters form {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.listing__filters ul {
    list-style: none;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .5rem;
    margin: 1rem 0 0 0;
}

.listing__filters li {
    padding: .25rem 0;
    margin-bottom: 0rem;
}

.listing__filters ul a {
    text-decoration: none;
    padding: .5rem 1rem;
    border: 1px solid #494949;
    border-radius: 51px;
    transition: all .25s ease;
    font-size: .7rem;
}

.listing__filters ul a:hover {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--bg);
}

.listing__filters li.active a {
    background: var(--secondary);
    border: 1px solid var(--secondary);
    color: var(--bg);
}

.listing__search {
    width: 65%;
}

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

    .listing__search {
        width: 100%;
    }

    .cards__list {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }

    .card__name {
        font-size: 1.4rem;
    }

    .card__sub {
        font-size: .8rem;
    }

    .card__info p {
        font-size: 1rem;
    }
    
    .cards__list>a {
        aspect-ratio: auto;
        padding: 1rem 1.5rem 2rem;
    }
}

/* PAGINATION */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    gap: 1rem;
    /*padding: 2rem;*/
    margin: 3rem 0;
    position: relative;
}

.pagination ul {
    list-style-type: none;
    display: flex;
    gap: 1rem;
}

.pagination ul li {
    margin: 0;
}

.pagination a {
    text-decoration: none;
    position: relative;
}

.pagination a svg {
    width: 1.5rem;
}


span.page-numbers.current {
    background: var(--secondary);
    padding: 0.7rem 1rem;
    line-height: 1;
    width: 1rem;
    position: relative;
    /* display: inline-block; */
    border-radius: 32rem;
    color: white;
    font-weight: 800;
}

.pagination .prev-arrow {
    color: var(--secondary);
    font-weight: 900;
    position: absolute;
    top: -2px;
    left: -1.5rem;
}

.pagination .next-arrow {
    color: var(--secondary);
    font-weight: 900;
    position: absolute;
    top: -2px;
    right: -1.5rem;
}



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

    .cards__list {
        justify-content: center;
    }

    .listing__filters {
        flex-direction: column;
    }

    .listing__filters form {
        flex-direction: column;
        width: 100%;
    }

    /*.archive .hero {
        padding: 7rem 0 3rem;

    }*/
}

/* MODAL */



dialog[open] {
    opacity: 1;
    transform: translateZ(0);
    transition: all .5s ease;
    display: flex;
    pointer-events: all;
    transform: translateX(0);
}

dialog::backdrop {
    background: #ffffff3d;
    backdrop-filter: blur(6px);
    transition: all .5s ease;
}

dialog {
    border: none;
    background: var(--secondary);
    width: 50%;
    height: 100dvh;
    opacity: 1;
    transform: scale(0.95);
    transition: all .5s ease;
    display: flex;
    justify-content: space-around;
    /*align-items: center;*/
    max-width: none;
    max-height: none;
    transform: translateX(-100%);
    z-index: 9;
    position: fixed;
    top: 0;
}

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

button.closeDialogBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: white;
}

.box__container {
    position: relative;
    display: flex;
    align-content: center;
    flex-direction: column;
    gap: 2rem;
}

.nextBtn,
.prevBtn {
    position: absolute;
    background: none;
    border: none;
    z-index: 1;
}

.nextBtn:hover,
.prevBtn:hover {
    position: absolute;
    background: none;
    border: none;
}

.nextBtn {
    right: 1rem;
}

.prevBtn {
    left: 1rem;
}

button.download-btn {
    border: none;
}

button.download-btn {
    border: none;
    background: none;
}

button.closeDialogBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
}

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

    .nextBtn,
    .prevBtn {
        margin-top: -4rem
    }

    .nextBtn {
        right: 0rem;
    }

    .prevBtn {
        left: 0rem
    }


}


/* MISSIONS CATEG */

.missions-template {
    
}

.missions-template .hero p:last-of-type {
    font-size: .85rem;
    font-weight: 400;
}

.hero .missions__pre {
    margin-top: 0;
    margin-bottom: calc(var(--spacer) / 1.5);
    font-weight: 500;
    font-family: 'Host Grotesk';
    font-size: 1.4rem;
    line-height: 1.143;
}


.missions-template .hero {
    padding-bottom: 0;
}

.missions-template .hero h1 {
    margin-bottom: .2rem;
}

.missions-template hr {
    border: none;
    border-top: 1px solid var(--sable);
    margin: 2.5rem 0;
}

.missions-template section:has(.content) {
    padding-top: 0;
}

@media screen and (min-width:991px) {

    .missions-template, .single-missions {
    
    .hero .ctn, .content .ctn {
        max-width: 48rem;
        padding-right: 0;
    }

    .hero .missions__pre {
        max-width: 80%;
    }

    .related-posts .ctn {
        max-width: 48rem;
    }
}

}

/* MISSIONS SINGLE */

.missions-template-default section:has(.content), .missions-template-cpt-mission section:has(.content) {
    background-image: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/waves2.svg);
    background-size: 60%;
    background-position: 110% -150%;
    background-repeat: no-repeat;
    padding-top: 0;
}

.missions-template-default section:not(.related-posts) h2 {
    color: var(--secondary);
    font-size: .75rem;
    font-family: "Antagometrica", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.missions-template-default section:not(.related-posts) .ctn p+h2 {
    margin-top: 2rem;
}

.related-posts {
    padding-top: 0;
}

.related-posts h2 {
    text-transform: none;
    font-weight: 400;
}

.related__cards {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: var(--spacer);
    font-family: "Host Grotesk", sans-serif;
}

.related__cards .card {
    aspect-ratio: 1;
}

.related__cards>div {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background:
    url('https://www.studiocolibri.be/ecorce/wp-content/uploads/2024/12/waves.svg') no-repeat center bottom,
    var(--primary);
    background-size: cover;
}

.related__cards a::before {
    content: "";
    width: 100%;
    height: 100%;
    bottom: 0;
    position: absolute;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
    z-index: 1;
    transition: background 0.25s ease-in-out;
}

.related__cards a:not(:has(img))::before {
    background: none;
}

.related__cards a:hover::before {
    background: var(--secondary);
}


.related__cards img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

.related__cards h3 {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    color: white;
    padding-right: 30%;
    font-size: 1rem;
    line-height: 1.143;
    z-index: 1;
}

.related__cards a {
    width: 100%;
    height: 100%;
}


.related__cards svg {
    position: absolute;
    width: 1rem;
    top: 1rem;
    right: 1rem;
    opacity: 0;
    transition: 0.25s ease-in-out;
    z-index: 3;
    transform: scale(.75) rotate(25deg);
}

.related__cards>div:hover svg {
    opacity: 1;
    transform: scale(1) rotate(0);
}



@media screen and (max-width: 991px) {
    .related__cards {
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    }
}



.missions__acc {
    box-sizing: border-box;
    overflow: hidden;
}

.missions__block {
    border-bottom: 1px solid var(--sable);
    padding: 2.5rem 0;
}

.mission__acc {
    padding: 1.5rem 0;
}

.missions__block:first-of-type {
    padding-top: 0;
}


details summary h2,
.mission__acc h2 {
    font-size: 1.4rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    text-transform: none;
}

details.missions__acc p:first-of-type {
    margin: 0;
}

details.missions__acc p {
    padding-right: 2rem;
}

.missions__acc ul li::before {
    content: none;
}


details.missions__acc p:first-of-type {
    margin: 0;
}


.missions__acc + ul {
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

@media screen and (max-width:991px) {
    .missions__acc + ul {
        flex-wrap: nowrap;
        overflow: scroll;
    }
    
    .missions__acc + ul li {
        min-width:65%!important;
    }


}

.missions__acc + ul li {
    margin-bottom: .5rem;
    font-size: 0.75rem;
    list-style-type: none;
    width: calc((100% / 4) - 1rem);
    background: var(--primary);
    color: white;
    list-style: none;
    padding: 1.3rem 3rem 1.5rem 1rem;
    height: 6rem;
    border-radius: 0.4rem;
    line-height: 1.1;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    transition: all .25s ease;
    letter-spacing: 1.2px;
}

.missions__acc + ul li:hover {
    background: var(--secondary);
}

.missions__acc + ul li a {
    text-decoration: none;
    color: white;
    width: 100%;
    height: 100%;
    display: block;
}

.missions__acc + ul li svg {
    fill: white;
    width: 1rem;
    position: absolute;
    right: .75rem;
    bottom: .75rem;
}

.missions__acc + ul li::before {
    content: none;
}

details.missions__acc + ul {
    /*padding: 0 calc(var(--spacer) / 2);*/
    max-height: 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}


details[open].missions__acc + ul {
    max-height: 20rem;
    opacity: 1;
    margin-top: var(--spacer);
  }


/* PRESENTATION */

p.subheading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05rem;
    font-size: .7rem;
    margin-top: -.5rem;
}

ul.traces {
    list-style: none !important;
    padding-left: 0;
    padding-right: 5rem;
    margin-top: var(--spacer);
}

ul.traces li {
    position: relative;
    padding-left: 4rem;
    margin-bottom: calc(var(--spacer) / 1.5);
    list-style: none !important;
}

ul.traces li strong {
    text-transform: uppercase;
}

ul.traces li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    transform: translateY(-50%);
    width: 3.05rem;
    height: .75rem;
    background-color: var(--primary);
    -webkit-mask: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2025/01/trait.svg) no-repeat center;
    mask: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2025/01/trait.svg) no-repeat center;
    margin-left: 0;
}

.page-id-100 .footer__cta {
    display: none;
}

.presa__cta {
    background: var(--lighter);
    border-radius: var(--radius);
    padding: calc(var(--spacer)*1.25);
}

.presa__cta h3 {
    font-family: "Host Grotesk", sans-serif;
    border-bottom: .5px solid var(--primary);
    padding-bottom: 0.7rem;
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0 !important;
}


.presa__cta details {
    padding: 1rem 0;
    border-bottom: .5px solid var(--primary);
    margin-top: 0;
}

.presa__cta details p {
    margin-top: 0.75rem;
    font-size: .7rem;
}

.presa__cta details summary::after {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="%233f5c58" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M6 15l6 6 6-6"%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    transition: transform 0s ease;
}

.presa__cta summary {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.presa__cta summary:hover {
    color: var(--primary);
}

.presa__cta a.wp-block-button__link {
    color: var(--bg);
    background: var(--primary);
}

.presa__cta a.wp-block-button__link:hover {
    color: var(--bg);
    background: var(--secondary);
}

.presa__why {
    padding: 4rem 0 !important;
    background: var(--sable);
    background-image:
        url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2025/01/pattern-shape_pq_travailler_2.svg),
        url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2025/01/pattern-shape_pq_travailler_1.svg);
    background-position:
        110% 7%,
        -10% 50%;
    background-size:
        60%,
        50%;
    background-repeat: no-repeat, no-repeat;
}

.presa__why h2 {
    margin-bottom: var(--spacer);
}

.presa__why h3 {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.presa__why p {
    margin-block-start: 0;
}

.presa__why a {
    color: var(--primary);
    margin-top: calc(var(--spacer)/2);
}

.presa__why .wp-block-column {
    position: relative;
    padding: var(--spacer);
}

@media screen and (min-width:991px) {
    .presa__why .wp-block-column:not(:last-child)::after {
        content: "";
        position: absolute;
        top: -.3rem;
        right: -1rem;
        width: .6rem;
        height: 100%;
        background-image: url(https://www.studiocolibri.be/ecorce/wp-content/uploads/2025/01/why_separator.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 1;
    }
}

.presa__agg {
    background: #595B3B;
    color: white;
    padding: 0;
}

.presa__agg .wp-block-column:last-child {
    padding: calc(var(--spacer)* 2) 10% calc(var(--spacer)* 2) calc(var(--spacer)* 2);
}

.presa__agg figure {
    height: 100%;
}

.presa__agg img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
    object-position: left center;
}

.presa__agg ul li {
    /* list-style-position: inside; */
    margin-bottom: .1rem;
    list-style: "·" outside;
    padding-left: 1rem;
    font-size: .85rem;
}


.presa__agg ul li:before {
    content: none;
}


.presa__agg ul li::marker {
    color: var(--lighter);
    font-weight: 600;
}


/* PHILOSOPHIE */

.page-id-239 .hero {
    padding-bottom: 0;
}

.page-id-239 .content {
    padding-bottom: 4rem;
}

.page-id-239 .content p {
    font-size: 1rem;
}

.page-id-239 h2.wp-block-heading {
    font-size: 1.7rem;
    text-transform: none;
}

.philo__row {
    margin-bottom: 4rem;
}

.philo__row:nth-child(even) {
    flex-direction: row-reverse;
}

.philo__intro p {
    font-size: .9rem!important;
}

.philo__intro h3 {
    font-size: 1.2rem;
    font-weight: 400;
}

@media screen and (min-width:991px) {
    .philo__row img {
        max-width: 80%;
    }
}

@media screen and (max-width:991px) {
    
    .philo__row {
        margin-bottom: calc(var(--spacer)*2);
        text-align: center;
    }
    
    .page-id-239 .hero {
        padding-bottom: 4rem;
    }

}

/* SOURCES */

@media screen and (min-width: 991px) {
    .sources-list {
        columns: 2;
        gap: 4rem;
    }
}

.sources-list {
    margin-top: 2rem;
}

.sources-list ul {
    margin-bottom: 1rem;
    list-style-type: none;
}

.sources-list li {
    margin-bottom: 1rem !important;
}

.sources-list p {
    margin: 0;
    line-height: 1.4 !important;
}

.sources-list h2 {
    margin: 0;
    color: var(--secondary);
    margin-bottom: 1rem;
}

.sources-list a {
    text-decoration: none;
}

/* PROGRAMME */

.programme {
    display: flex;
    margin-top: 2rem;
    gap: 1.5rem;
    padding: 0 4rem 0 2rem;
}

.programme__left {
    padding: 0;
    background: var(--secondary);
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .6rem;
    border-radius: 100%;
    flex-wrap: wrap;
    /* position: absolute; */
    padding: 1.5rem;
    align-content: center;
    font-weight: 600;
    text-align: center;
}



.programme h3 {
    margin-bottom: .4rem;
    font-size: 1.2rem;
}

.programme p {
    margin-bottom: 1rem;
}

.programme__left p {
    all: unset;
}

.wp-block-details:last-of-type {
    border-bottom: none;
}

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

    .programme {
        margin-top: 1rem;
        gap: 1.5rem;
        padding: 1rem;
        flex-direction: column;
    }
}

/* CONTACT */

div#map {
    min-height: 30rem;
}


input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    border-radius: 2rem;
    border: none;
    width: 100%;
    margin: 0 auto;
    padding: .75rem 1.5rem;
    font-weight: 200;
    /* box-shadow: 0rem 0rem 2rem #00000012; */
    cursor: auto;
    border: 1px solid lightgrey;
}

textarea.wpcf7-form-control.wpcf7-textarea {
    border-radius: 1.5rem;
    width: 100%;
    padding: .75rem 1.5rem;
    border: 1px solid lightgrey;
    cursor: auto;
}

/* FEATURED */

.featured {
    padding: 4rem 0;
}

.comite ul {
    margin-top: 7rem;
    columns: 2;
}

/* MODULES & COMPONENTS */

.embla {
    overflow: hidden;
    margin: var(--spacer) 0 0;
    cursor: grab;
    position: relative;
}

.embla:active {
    cursor: grabbing;
}

a.embla__arrow {
    position: absolute;
    z-index: 8;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

a.embla__arrow svg {
    width: 4rem;
}

a.embla__arrow.right {
    right: 0;
}

a.embla__arrow.left {
    left: 0;
    
}

.embla__container {
    display: flex;
}

.embla__slide {
    flex: 0 0 50%;
    min-width: 0;
    padding: 0 0.2rem;
}

.embla__slide img {
    /*aspect-ratio: 1.73;*/
    object-fit: cover;
    max-width: none;
    width: 100%;
    border-radius: var(--radius);
}

.embla__dots {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 0.5rem;
}

.embla__dot {
    cursor: pointer;
    transition: background-color 0.3s;
}

.embla__dot.is-selected {
    background: var(--accent);
}

.embla {
  margin: auto;
  --slide-height: 19rem;
  --slide-spacing: 1rem;
  --slide-size: 100%;
}
.embla__viewport {
  overflow: hidden;
}
.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    margin-left: calc(var(--slide-spacing) * -1);
    /*max-height: 20rem;*/
    margin-top: 2rem;
}

.embla__slide {
  transform: translate3d(0, 0, 0);
  flex: 0 0 var(--slide-size);
  min-width: 0;
  padding-left: var(--slide-spacing);
}

.embla__slide img {
  height: 100%;
}

.row:has(.slider) {
    margin: 3rem 0;
}

.slider {
    width: 50%;
    max-width: 1140px;
    overflow: hidden;
    border-radius: .5rem;
}

.slides {
    position: relative;

}

.slide {
    float: left;

}

.slide img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.slides.embla__viewport {
    overflow: hidden;
    width: 100%;
    cursor: grab;
}

.slides.embla__viewport:active {
    cursor: grabbing;
}

.slider .embla__container {
    display: flex;
}

.slider .embla__slide {
    flex: 0 0 100%;
    text-align: center;
}

.content-slide {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.content-slide.active {
    display: block;
    opacity: 1;
}

.slider__right {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacer);
    aspect-ratio: 1.3;
    justify-content: space-between;
}

.slider__right h3 {
    font-size: 1.6rem;
    margin-bottom: calc(var(--spacer) / 2);
    font-family: "Host Grotesk", sans-serif;
    line-height: 1.1;
}


.slider__controls {
    display: flex;
    gap: .5rem;
}

.slider__controls a {
    text-decoration: none;
    cursor: pointer;
    background: var(--lighter);
    display: block;
    padding: .25rem;
    border-radius: 2rem;
    transition: all .25s ease;
}

.slider__controls a:first-child {
    transform: rotate(180deg);
}

.slider__controls a:hover {
    background: var(--accent);
}

.slider__controls svg {
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(.05rem);
}

.bullet,
.embla__dot {
    opacity: .5;
    width: 3rem;
    display: inline-block;
    height: .15rem;
    background: var(--lighter);
}

.slider__bullets {
    display: flex;
    gap: .5rem;
}

a.bullet.active {
    opacity: 1;
}

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

    .row>* {
        flex: auto;
    }

    .slider__right {
        justify-content: flex-start;
    }

    .embla__slide {
        flex: 0 0 75%;
        min-width: 0;
        padding: 0 0.2rem;
    }
    
    .embla__slide img {
        /*aspect-ratio: 1;*/
    }
}

/* CONTACT */

.contact__row h2 {
    font-family: 'Antagometrica';
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.page-id-95 a.header__cta {
    background: var(--primary)!important;
}

.page-id-95 hr:first-of-type {
    display: none;
}

.contact__row .wp-block-group {
    padding: var(--spacer);
    box-shadow: 0 2px 20px #00000017;
    border-radius: var(--radius);
    margin-top: 1.4rem;
    background: white;
}

@media screen and (min-width:991px) {
    .contact__row {
        padding: 0 8rem;
    }

    .contact__row .wp-block-column:first-child {
        padding-right: 10%;
    }
    
}

/* ANIMATIONS & INTERACTIONS */

.fade {
    opacity: 1;
    transform: translateY(0);
}

.animate {
    opacity: 0;
    transform: translateY(20px) skewY(1.25deg);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

@media screen and (max-width:991px) {
        .animate {
            opacity: 1;
            transform: translateY(0) skewY(0deg);
            transition: none;
        }
}

.animate.fade-in {
    opacity: 1;
    transform: translateY(0) skewY(0deg);
}

.fade-in-up-delay {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards .4s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.fade-in-up:nth-child(n) {
    animation-delay: calc(0.15s * var(--i));
}



@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav>ul>li>ul {
    transform: translateY(10px);
    opacity: 1;
    transition: transform .3scubic-bezier(.165,.84,.44,1), opacity .3scubic-bezier(.165,.84,.44,1), .3s visibility 0scubic-bezier(.25,.46,.45,.94), -webkit-transform .3scubic-bezier(.165,.84,.44,1);

}


nav>ul>li:hover>ul {
    visibility: visible;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    -webkit-transition: opacity .3s .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s .1s cubic-bezier(.165, .84, .44, 1);
    transition: opacity .3s .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s .1s cubic-bezier(.165, .84, .44, 1);
    transition: transform .3s .1s cubic-bezier(.165, .84, .44, 1), opacity .3s .1s cubic-bezier(.165, .84, .44, 1);
    transition: transform .3s .1s cubic-bezier(.165, .84, .44, 1), opacity .3s .1s cubic-bezier(.165, .84, .44, 1), -webkit-transform .3s .1s cubic-bezier(.165, .84, .44, 1)
}