@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/Neulis_Sans_Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/Neulis_Sans_Semi_Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

:root {
    --orange:#ce6b4c;
    --orange-dark:#a65339;
    --yellow:#efc500;
    --blue:#1e3354;
    --background-color:white;
}

html {
    max-width:100vw;overflow-x:hidden;
}

body {
    font-family:'Neulis Sans', sans-serif;background-color:var(--background-color);color:var(--blue);margin:0;padding:0;
}

h1, h2, h3 {
    color:var(--yellow);font-family:'Neulis Sans', sans-serif;font-weight:bold;line-height:1.1;
}

p, ul, ol {
    line-height:1.2;
}
ul, ol {
    & li {
        margin-bottom:.5rem;
    }
}

a.button {
    display:flex;align-items:center;justify-content:center;width:fit-content;padding:0 2rem;line-height:2;background:var(--yellow);font-weight:bold;color:var(--blue);text-decoration:none;margin:1rem 0;clip-path: polygon( 100% 27.68%,100% 92.433%,100% 92.433%,99.983% 93.66%,99.936% 94.824%,99.859% 95.91%,99.756% 96.902%,99.63% 97.783%,99.482% 98.54%,99.317% 99.155%,99.135% 99.614%,98.941% 99.901%,98.735% 100%,4.626% 100%,4.626% 100%,4.526% 99.976%,4.427% 99.905%,4.329% 99.789%,4.234% 99.627%,4.142% 99.422%,4.052% 99.175%,3.966% 98.886%,3.883% 98.556%,3.805% 98.187%,3.731% 97.78%,0.37% 77.667%,0.37% 77.667%,0.302% 77.226%,0.241% 76.758%,0.186% 76.264%,0.137% 75.747%,0.096% 75.211%,0.062% 74.656%,0.035% 74.087%,0.016% 73.505%,0.004% 72.914%,0% 72.314%,0% 7.562%,0% 7.562%,0.017% 6.335%,0.064% 5.171%,0.141% 4.086%,0.244% 3.095%,0.37% 2.214%,0.517% 1.458%,0.683% 0.844%,0.864% 0.385%,1.059% 0.099%,1.264% 0%,95.374% 0%,95.374% 0%,95.474% 0.024%,95.573% 0.094%,95.67% 0.21%,95.765% 0.371%,95.858% 0.575%,95.947% 0.822%,96.034% 1.11%,96.116% 1.439%,96.194% 1.808%,96.268% 2.215%,99.63% 22.328%,99.63% 22.328%,99.698% 22.768%,99.759% 23.237%,99.814% 23.731%,99.863% 24.247%,99.904% 24.784%,99.938% 25.338%,99.965% 25.908%,99.984% 26.489%,99.996% 27.081%,100% 27.68% );aspect-ratio:1121/187;
    &:hover, &:focus {
        background:var(--orange-dark);
    }
}

.grid-container {
    max-width:calc(100% - 6rem);
}

header {
    position:relative;background:url('../img/bg-header-homepage.jpg') no-repeat center center var(--orange);background-size:cover;margin-top:3rem;padding:1rem 2rem 2rem;color:white;border-radius:1rem;
    &::before {
        content:'';position:absolute;background:url('../img/pattern.png') top right no-repeat;background-size:contain;top:0;left:0;width:100%;height:65%;pointer-events:none;mix-blend-mode:color-dodge;
    }
    & .angle-top, & .angle-bottom {
        position:absolute!important;top:0;right:0;width:6rem;height:auto;aspect-ratio:1;background:url('../img/angle.svg') top left no-repeat;pointer-events:none;transform:rotate(90deg);
    }
    & .angle-bottom {
        bottom:0;left:0;right:auto;top:auto;transform:rotate(-90deg);width:4rem;
    }
    & nav {
        position:relative;z-index:2!important;margin-bottom:1rem;
        & .logo {
            width:95%;
        }
        & label[for="menu-header"] {
            display:none;position:fixed;top:2.5rem;right:1rem;font-size:2rem;color:var(--orange);cursor:pointer;z-index:999999;
             &:hover, &:focus {
                color:var(--yellow);
            }
            & span {
                display:block;width:1.5rem;height:.25rem;background:var(--orange);margin-bottom:.25rem;transition:all .3s ease-in-out;
                &:nth-child(1) {
                    transform-origin:top left;
                }
                &:nth-child(3) {
                    transform-origin:bottom left;
                }
            }
            &:hover, &:focus {
                & span {
                    background:var(--orange-dark);
                }
            }
        }
        & input#menu-header {
            display:none;
        }
        & ul.menu {
            display:flex;gap:1rem;justify-content:flex-end;
            & li {
                list-style:none;margin-bottom:0;position:relative;color:var(--blue);text-decoration:none;font-weight:bold;font-size:1.3rem;line-height:2;padding-inline:1rem;
                & a {
                    color:var(--blue);text-decoration:none;font-weight:bold;font-size:1.3rem;padding:0;line-height:2;
                    &:hover, &:focus {
                        color:var(--yellow);
                    }
                }
                &:has(ul) {
                    cursor:pointer;
                    &:hover, &:focus {
                        color:var(--yellow);border-color:var(--yellow);
                        & > ul {
                            visibility:visible;opacity:1;
                        }
                    }
                }
                & ul {
                    display:flex;flex-direction:column;position:absolute;background:var(--yellow);padding:1rem;gap:0;top:100%;right:0;white-space:nowrap;visibility:hidden;opacity:0;transition:opacity .3s ease;min-width:100%;clip-path: polygon( 100% 14.744%,100% 98.439%,100% 98.439%,99.989% 98.692%,99.959% 98.932%,99.91% 99.156%,99.844% 99.361%,99.763% 99.543%,99.669% 99.699%,99.563% 99.826%,99.447% 99.921%,99.322% 99.98%,99.191% 100%,2.961% 100%,2.961% 100%,2.897% 99.995%,2.833% 99.981%,2.771% 99.957%,2.71% 99.923%,2.651% 99.881%,2.594% 99.83%,2.539% 99.771%,2.486% 99.703%,2.436% 99.627%,2.389% 99.543%,0.237% 95.391%,0.237% 95.391%,0.193% 95.3%,0.154% 95.204%,0.119% 95.102%,0.088% 94.995%,0.062% 94.885%,0.04% 94.77%,0.022% 94.653%,0.01% 94.533%,0.002% 94.411%,-0% 94.287%,-0% 1.561%,-0% 1.561%,0.011% 1.308%,0.041% 1.068%,0.09% 0.844%,0.156% 0.639%,0.237% 0.457%,0.331% 0.301%,0.437% 0.174%,0.553% 0.08%,0.678% 0.02%,0.809% 0%,92.359% 0%,92.359% 0%,92.423% 0.005%,92.486% 0.019%,92.548% 0.043%,92.609% 0.077%,92.669% 0.119%,92.726% 0.17%,92.781% 0.229%,92.834% 0.297%,92.884% 0.373%,92.931% 0.457%,99.763% 13.64%,99.763% 13.64%,99.807% 13.731%,99.846% 13.827%,99.881% 13.929%,99.912% 14.036%,99.938% 14.146%,99.96% 14.261%,99.978% 14.378%,99.99% 14.498%,99.998% 14.62%,100% 14.744% );
                    &:hover, &:focus-within {
                        visibility:visible;opacity:1;
                    }
                    & li {
                        list-style:none;margin-bottom:0;color:white;font-size:1rem;font-weight:bold;
                        & a {
                            color:white;font-size:1rem;font-weight:bold;
                            &:hover, &:focus {
                                color:var(--blue);
                            }
                        }
                    }
                }
            }
            &.menu-top {
                gap:.5rem;margin-right:5vw;margin-bottom:2rem;
                & li {
                    font-size:1rem;color:white;font-weight:bold;
                    & a {
                        font-size:1rem;color:white;font-weight:bold;
                        &:hover, &:focus {
                            color:var(--yellow);
                        }
                    }
                    & ul {
                        z-index:2;
                        & a {
                            &:hover, &:focus {
                                color:var(--blue);
                            }
                        }
                    }
                }
            }
            &:not(.menu-top) {
                border-bottom:1px solid white;
                & li {
                    border-bottom:2px solid transparent;
                    & a {
                        &:hover, &:focus {
                            border-color:var(--yellow);
                        }
                    }
                    &:hover, &:focus {
                        border-color:var(--yellow);
                    }
                }
            }
        }
    }
    & img[alt="header-africa"] {
        max-width:25rem;margin-inline:auto;display:block;margin-top:3rem;
    }
    & h1 {
        font-size:5rem;margin-top:25%;margin-bottom:1rem;
        & + p {
            font-size:1.5rem;font-weight:bold;color:white;max-width:32rem;margin-top:0;
        }
    }
    & .membres-header {
        padding-inline:4rem;
        & .membre-header {
            display:flex;align-items:flex-end;gap:1rem;margin-bottom:1rem;
            & figure {
                margin-top:0;position:relative;
                &::before, &::after {
                    content:'';position:absolute;top:0;left:0;width:2rem;height:2rem;background:url('../img/angle-orange.svg') top left no-repeat;background-size:contain;pointer-events:none;transform:rotate(0deg);z-index:1;
                }
                &::after {
                    top:auto;left:auto;bottom:0;right:0;transform:rotate(-180deg);
                }
                & img {
                    width:100%;height:100%;object-fit:cover;object-position:center;border-radius:.5rem;
                }
            }
            & .member-content {
                padding:1rem;flex:1 0 75%;
                & h2 {
                    font-size:1.5rem;
                }
                & h3 {
                    margin-top:0;font-size:1.4rem;font-weight:bold;
                    & span {
                        display:block;font-size:.9rem;color:var(--blue);
                    }
                }
                & p {
                    margin-bottom:0;font-size:.9rem;font-weight:bold;color:var(--blue);
                }
                & a {
                    &.button {
                        margin:1rem 0 0 0;
                    }
                    &:not(.button) {
                        color:var(--blue);text-decoration:none;margin:0;display:inline-block;text-decoration:underline;
                        &:hover, &:focus {
                            color:var(--yellow);text-decoration:none;
                        }
                    }
                }
            }
        }
    }
}

main {
    position:relative;z-index:1;
    &::after {
        content:'';position:absolute;background:url('../img/pattern-yellow.png') top left no-repeat;background-size:contain;top:-12.5rem;left:-13.5rem;width:40rem;aspect-ratio:1;pointer-events:none;z-index:-1;
    }
}

/* SECTIONS */
section {
    position:relative;margin-top:3rem;
    & a.button {
        margin:2rem auto 0 auto;
    }
    & .cell.text-content {
        padding-left:3rem;
        & > p, & > ul, & > ol, & > a {
            margin-left:4rem;text-align:justify;
        }
    }
    &[data-title="Geographic Map of the network"] {
        & figure {
            position:relative;
            & img {
                width:60%;display:block;margin:2rem auto;
            }
            & figcaption {
                position:absolute;bottom:0;right:0;width:35%;padding-bottom:1rem;font-size:1.4rem;line-height:1.2;font-weight:bold;color:var(--blue);
            }
        }
    }
    &[data-title="The 5 research axis"] {
        &::after {
            content:'';display:block;position:absolute;top:50%;left:0;width:100%;height:100%;background:var(--orange-dark);z-index:-1;
        }
        & .cell {
            display:flex;justify-content:center;flex-wrap:wrap;gap:1rem;
            & h2 {
                flex:1 1 100%;text-align:center;
            }
            & .swiper-slide {
                display:flex;flex-direction:column;align-items:center;
                & figure {
                    background:var(--orange);border-radius:.5rem;aspect-ratio:303/397;overflow:hidden;margin-bottom:1rem;
                    & img {
                        width:100%;height:100%;object-fit:cover;mix-blend-mode:soft-light;position:relative;z-index:0;transition:transform 3s ease-in-out;
                    }
                    & figcaption {
                        position:absolute;bottom:0;left:0;width:100%;padding:3rem 1rem;font-size:1.2rem;line-height:1.2;font-weight:bold;color:var(--yellow);text-align:left;z-index:2;
                    }
                    &::before {
                        content:'';position:absolute;bottom:0;left:0;width:100%;height:50%;background:linear-gradient(180deg,rgba(228, 123, 92, 0) 0%, rgba(228, 123, 92, 1) 100%);z-index:1;
                    }
                    &::after {
                        content:'+';position:absolute;bottom:.25rem;right:.25rem;width:2rem;line-height:1;background:var(--yellow);z-index:3;display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;border-radius:.25rem;border-bottom-right-radius:.8rem;font-size:2rem;
                    }
                    & + p {
                        color:white;font-size:.9rem;
                    }
                }
                &:hover, &:focus-within {
                    & figure {
                        & img {
                            transform:scale(1.5);
                        }
                    }
                }
            }
        }
    }
    &[data-title="Training through"] {
        & h2 {
            margin-bottom:2rem;text-align:center;
        }
        & figure {
            clip-path:polygon( 99.453% 10.521%,95.065% 1.032%,95.065% 1.032%,94.967% 0.837%,94.864% 0.661%,94.756% 0.504%,94.643% 0.366%,94.526% 0.249%,94.406% 0.151%,94.283% 0.075%,94.157% 0.02%,94.029% -0.014%,93.901% -0.025%,1.653% -0.025%,1.653% -0.025%,1.383% 0.028%,1.128% 0.168%,0.89% 0.388%,0.674% 0.68%,0.482% 1.038%,0.317% 1.455%,0.183% 1.925%,0.084% 2.439%,0.021% 2.991%,0% 3.574%,0% 86.962%,0% 86.962%,0.005% 87.247%,0.021% 87.528%,0.046% 87.804%,0.082% 88.073%,0.127% 88.334%,0.181% 88.586%,0.245% 88.827%,0.317% 89.058%,0.399% 89.275%,0.489% 89.479%,4.877% 98.968%,4.877% 98.968%,4.975% 99.163%,5.078% 99.339%,5.186% 99.496%,5.299% 99.634%,5.416% 99.751%,5.536% 99.849%,5.659% 99.925%,5.785% 99.98%,5.912% 100.014%,6.041% 100.025%,98.289% 100.025%,98.289% 100.025%,98.556% 99.979%,98.809% 99.844%,99.046% 99.629%,99.263% 99.34%,99.456% 98.984%,99.621% 98.568%,99.756% 98.1%,99.857% 97.586%,99.92% 97.034%,99.942% 96.451%,99.942% 13.063%,99.942% 13.063%,99.937% 12.778%,99.921% 12.497%,99.896% 12.221%,99.86% 11.952%,99.815% 11.691%,99.761% 11.439%,99.697% 11.198%,99.624% 10.967%,99.543% 10.75%,99.453% 10.546% );aspect-ratio:859/398;
            & + p {
                margin-left:3vw;margin-top:1rem;font-size:.9rem;
                & strong {
                    color:var(--yellow);font-weight:bold;font-size:1.1rem;
                }
            }
        }
    }
    &[data-title="Key figures"] {
        & h2 {
            margin-bottom:0;text-align:center;
        }
        & .swiperKey{
            width:1200px;max-width:100%;margin:3rem auto 0 auto;
            & .swiper-wrapper{
                justify-content:center;box-sizing:border-box;
                & .swiper-slide {
                    width:25%;padding:0 1rem;
                    & .keyCard{
                        display:flex;flex-direction:column;align-items:center;position:relative;text-align:center;
                        & .keypicto{
                            width:9rem;height:auto;border-radius:50%;padding:2rem;position:relative;aspect-ratio:1;box-sizing:border-box;
                            & img{
                                width:auto;height:auto;object-fit:contain;aspect-ratio:1;
                            }
                            & svg{
                                position:absolute;top:0;left:0;width:100%;height:100%;
                            }
                        }
                        & .keyNumber{
                            margin-top:.5rem;font-size:2rem;font-weight:bold;line-height:1;
                        }
                        & .keyText{
                            margin-top:0;font-size:1rem;font-weight:bold;
                        }
                    }
                }
            }
        }
    }
    &[data-title="Last News"] {
        & .swiperNews{
            width:100%;box-sizing:border-box;
            & .swiper-wrapper{
                display:flex;align-items:center;gap:1rem;box-sizing:border-box;justify-content:flex-start;
            }
            & .swiper-slide {
                display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:.5rem;
                &:first-of-type {
                    width:25%;flex:0 0 25%;
                }
                & figure {
                    width:50%;object-fit:cover;object-position:center;flex:1 0 50%;aspect-ratio:50/35;
                    &::before, &::after {
                        content:'';position:absolute;top:0;right:0;width:2rem;height:2rem;background:url('../img/angle.svg') top left no-repeat;background-size:contain;pointer-events:none;transform:rotate(90deg);z-index:1;
                    }
                    &::after {
                        top:auto;right:auto;bottom:0;left:0;transform:rotate(270deg);
                    }
                    & img {
                        border-radius:.5rem;
                    }
                }
                & .article-content {
                    padding:1rem;flex:1 0 50%;
                    & h2 {
                        font-size:1.5rem;
                    }
                    & h3 {
                        margin-top:0;font-size:1.2rem;font-weight:bold;
                        & span {
                            display:block;font-size:.9rem;color:var(--blue);text-transform:uppercase;
                        }
                    }
                    & p {
                        margin-bottom:0;font-size:.9rem;
                    }
                    & a {
                        &.button {
                            margin:1rem 0 0 0;
                        }
                        &:not(.button) {
                            color:var(--blue);text-decoration:none;margin:1rem 0 0 1rem;display:inline-block;
                            &:hover, &:focus {
                                color:var(--yellow);
                            }
                            &::before {
                                content:'>';margin-right:.25rem;
                            }
                        }
                    }
                }
            }
        }
    }
    &[data-title="Logos"] {
        margin-top:4rem;
        & .swiperLogos{
            width:100%;box-sizing:border-box;
            & .swiper-wrapper{
                display:flex;align-items:center;gap:0;box-sizing:border-box;justify-content:flex-start;
            }
            & .logoItem{
                display:flex;align-items:center;justify-content:center;box-sizing:border-box;
                & img {
                    width:120px;object-fit:contain;object-position:center;
                }
            }
        }
    }

    & figure {
        position:relative;
        &:has(img[data-fancybox]) {
            &::after {
                content:'+';position:absolute;bottom:.25rem;right:.25rem;width:2rem;line-height:1;background:var(--yellow);z-index:3;display:flex;align-items:center;justify-content:center;font-weight:bold;color:white;border-radius:.25rem;border-bottom-right-radius:.8rem;font-size:2rem;
            }
            &:hover, &:focus-within {
                & img {
                    transform:scale(1.2);
                }
            }
        }
        & img {
            width:100%;height:100%;object-fit:cover;object-position:center;position:relative;z-index:0;transition:transform 3s ease-in-out;
        }
    }
}

footer {
    position:relative;background:var(--orange);color:white;text-align:center;padding:1rem 0;margin-top:3rem;
    &::before {
        content:'';position:absolute;top:0;left:0;width:100%;height:33.3333%;background:url('../img/angle.svg') top left no-repeat;pointer-events:none;
    }
    & img {
        width:8rem;margin-bottom:1rem;
    }
    & p {
        text-align:right;margin:0;font-size:.8rem;text-transform:uppercase;
        & a {
            color:white;text-decoration:none;
            &:hover, &:focus {
                color:var(--yellow);
            }
        }
    }
    & ul.languages {
        display:flex;justify-content:flex-end;gap:1rem;padding:0;margin:0 0 .5rem 0;
        & li {
            list-style:none;
            & a {
                color:white;text-decoration:none;font-weight:bold;
                &:hover, &:focus {
                    text-decoration:underline;
                }
            }
        }
    }
}

.basicAppear {
    opacity:0;
    &.-xLeft {
        transform:translate(-200px, 0) scale(1);
    }
    &.-xRight {
        transform:translate(200px, 0) scale(1);
    }
    &.-yTop {
        transform:translate(0, -50px) scale(1);
    }
    &.-yBottom {
        transform:translate(0, 50px) scale(1);
    }
}

/* Pages */

body {
    &.home {
        & header {
            aspect-ratio:1920/995;
        }
    }
    &:not(.home) {
        & header {
            background:var(--orange);padding-bottom:4rem;
            &::before {
                content:'';background:var(--bg-header-img) no-repeat right center;position:absolute;top:0;left:25%;width:75%;height:100%;background-size:cover;mix-blend-mode:soft-light;
            }
            &::after {
                content:'';background:linear-gradient(90deg,rgba(206, 107, 76, 1) 0%, rgba(206, 107, 76, 0) 100%);position:absolute;top:0;left:25%;width:50%;height:100%;background-size:contain;
            }
            & > * {
                position:relative;z-index:1;
            }
            & h1 {
                font-size:1.6rem;margin-top:0;margin-left:-1rem;
                &::first-line {
                    font-size:3rem;
                }
                & span {
                    display:block;font-size:60%;
                }
                & ~ p {
                    font-size:1rem;font-weight:normal;color:white;margin-top:0;max-width:none;text-align:justify;
                }
            }
            & h2 {
                font-size:2rem;color:white;margin-left:-1rem;
            }
            & .large-8, & .large-7 {
                padding-left:5rem;
            }
            & .large-5:has(figure) {
                position:relative;
                & figure {
                    width:calc(100% - 4rem);object-fit:cover;object-position:center;border-radius:1rem;bottom:-7.5rem;position:absolute;z-index:1;
                    &::before, &::after {
                        content:'';position:absolute;top:0;left:0;width:5rem;height:auto;aspect-ratio:1;background:url('../img/angle-orange.svg') top right no-repeat;background-size:contain;pointer-events:none;transform:rotate(0deg);
                    }
                    &::after {
                        top:auto;left:auto;bottom:0;right:0;width:3rem;background-image:url('../img/angle.svg');transform:rotate(-180deg);
                    }
                }
            }
        }
    }
    &.single-post {
        & main {
            max-width:80%;margin-inline:auto;
            & section {
                margin-inline:2rem;
            }
        }
    }
    &.single-projet {
        & header {
            background:var(--orange);padding-bottom:4rem;aspect-ratio:auto;
            &::before {
                display:none;
            }
            & .large-6 {
                position:relative;
                &:not(:has(.infos)) {
                    padding-left:5rem;
                    & p {
                        font-size:1.1rem;font-weight:bold;color:white;margin-top:0;
                    }
                }
            }
            & .infos {
                position:absolute;z-index:1;background:var(--orange-dark);color:white;padding:3rem;border-radius:1rem;top:0;width:80%;left:10%;
                &::before, &::after {
                    content:'';position:absolute;top:0;right:0;width:3rem;height:auto;aspect-ratio:1;background:url('../img/angle-orange.svg') top right no-repeat;background-size:contain;pointer-events:none;transform:rotate(90deg);
                }
                &::after {
                    top:auto;right:auto;bottom:0;left:0;background-image:url('../img/angle.svg');transform:rotate(-90deg);
                }
                & p {
                    font-size:1rem;font-weight:bold;color:white;margin-top:0;
                    &:last-of-type {
                        margin-bottom:0;
                    }
                    &.location {
                        color:var(--yellow);position:relative;margin-bottom:0;
                        &::before {
                            content:'\f3c5';font-family:'Font Awesome 6 Free';font-weight:900;margin-right:.5rem;position:absolute;left:-1.5rem;top:-1rem;font-size:2rem;transform:rotate(-15deg);transform-origin:bottom center;
                        }
                    }
                }
                & li {
                    margin-bottom:0;font-size:.9rem;
                }
            }
        }
        & section {
            &.block-2-columns, &.block-2-columns-reverse {
                & .cell {
                    &:has(figure) {
                        & figure {
                            width:calc(80% + 2rem);margin-left:calc(10% - 2rem);
                        }
                    }
                }
            }
            &.block-2-columns {
                & .cell {
                    &:has(figure) {
                        padding-right:0;
                    }
                }
            }
            & ol {
                list-style:none;counter-reset:name;
                & li {
                    position:relative;padding-top:1.5rem;
                    &::before {
                        font-size:1.4rem;font-weight:bold;background:var(--orange-dark);color:var(--yellow);content:counter(name);counter-increment:name;display:inline-block;width:2rem;line-height:3rem;text-align:center;border-radius:.5rem;margin-right:1rem;position:absolute;left:-3rem;top:0;
                    }
                }
            }
        }
    }
    &.single-post {
        & header {
            & h1 {
                font-size:2.4rem;
                &::first-line {
                    font-size:2.4rem;
                }
            }
            & .date {
                margin-left:-1rem;color:var(--blue);margin-bottom:.25rem;
            }
            & .large-5:has(figure) {
                & figure {
                    position:relative;
                }
            }
        }
        & main {
            padding-top:2rem;
        }
    }
    &.page-template-page-mentions {
        & section {
            max-width:800px;margin-inline:auto;
        }
    }
    &.page-template-page-news {
        & section {
            &:first-of-type {
                & .cell {
                    margin-bottom:2rem;
                    &:has(figure) {
                        & figure {
                            margin-top:0;margin-bottom:1rem;object-fit:cover;object-position:center;aspect-ratio:50/35;
                            &::before, &::after {
                                content:'';position:absolute;top:0;right:0;width:2rem;height:2rem;background:url('../img/angle.svg') top left no-repeat;background-size:contain;pointer-events:none;transform:rotate(90deg);z-index:1;
                            }
                            &::after {
                                top:auto;right:auto;bottom:0;left:0;transform:rotate(270deg);
                            }
                        }
                        & h2 {
                            margin-bottom:.5rem;font-size:1.5rem;
                            & span {
                                display:block;font-size:.9rem;color:var(--blue);text-transform:uppercase;
                            }
                        }
                        & .news-content {
                            text-align:justify;
                        }
                    }
                }
            }
        }
    }
    &[data-slug="mission-objectives"] {
        & header {
            &::before {
                background-image:url('../img/bg-header-mission-objectives.jpg');
            }
        }
    }
    & section {
        & h2 {
            font-size:1.8rem;margin-bottom:2rem;
        }
        & p, & ul, & ol {
            font-size:.9rem;
        }
        &:first-of-type {
            & .cell {
                &:has(figure) {
                    & figure {
                        margin-top:-6rem;
                    }
                }
            }
        }
        &.block-2-columns, &.block-2-columns-reverse {
            &.fullwidth {
                max-width:100%;
            }
            &.background {
                background:var(--orange-dark);color:white;
                & .img-background {
                    position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;mix-blend-mode:soft-light;
                }
                &::before {
                    content:'';background:linear-gradient(90deg,rgba(166, 83, 57, 1) 50%, rgba(166, 83, 57, 0) 100%);position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;z-index:1;
                }
                &::after {
                    content:'';position:absolute;background:url('../img/pattern.png') top right no-repeat;background-size:contain;top:0;left:0;width:100%;height:60%;pointer-events:none;mix-blend-mode:color-dodge;
                }
                & .cell {
                    position:relative;z-index:2;
                    &.text-content {
                        & > p, & > ul, & > ol, & > a {
                            color:white;
                        }
                    }
                    &:has(figure) {
                        padding-left:0;
                        & figure {
                            width:100%;aspect-ratio:716/593;margin-top:-5%;height:110%;
                            & img {
                                width:100%;height:100%;object-fit:cover;object-position:center;border-top-left-radius:0;border-bottom-left-radius:0;
                            }
                        }
                    }
                }
            }
            & .cell {
                &.text-content {
                    padding-inline:5rem 2rem;display:flex;flex-direction:column;justify-content:center;
                    & > p, & > ul, & > ol, & > a {
                        margin-left:5rem;text-align:justify;
                    }
                }
                &:has(figure) {
                    padding-left:2rem;
                    & figure {
                        width:90%;aspect-ratio:716/593;
                        & img {
                            width:100%;height:100%;object-fit:cover;object-position:center;border-radius:1rem;
                        }
                    }
                }
            }
        }
        &.block-2-columns-reverse {
            & .grid-x {
                flex-direction:row-reverse;
                & .cell {
                    &.text-content {
                        padding:2rem 5rem 0 2rem;
                        & > p, & > ul, & > ol, & > a {
                            margin-left:0;margin-right:5rem;text-align:justify;
                        }
                        & > ul, & > ol {
                            margin-left:3rem;
                        }
                    }
                }
            }
            & .basicAppear {
                &.-xLeft {
                    transform:translate(200px, 0) scale(1);
                }
                &.-xRight {
                    transform:translate(-200px, 0) scale(1);
                }
            }
        }
        &.block-relations {
            & h2 {
                text-align:center;
            }
            & .swiperRelations{
                width:100%;box-sizing:border-box;
                & .swiper-wrapper{
                    display:flex;align-items:center;gap:1rem;box-sizing:border-box;justify-content:flex-start;
                }
                & .swiper-slide {
                    display:flex;align-items:center;justify-content:center;box-sizing:border-box;gap:.5rem;
                    &:first-of-type {
                        &.swiper-slide-active {
                            margin-left:35%;
                        }
                    }
                    & figure {
                        width:50%;object-fit:cover;object-position:center;flex:1 0 50%;aspect-ratio:50/35;
                        &::before, &::after {
                            content:'';position:absolute;top:0;right:0;width:2rem;height:2rem;background:url('../img/angle.svg') top left no-repeat;background-size:contain;pointer-events:none;transform:rotate(90deg);z-index:1;
                        }
                        &::after {
                            top:auto;right:auto;bottom:0;left:0;transform:rotate(270deg);
                        }
                        & img {
                            border-radius:.5rem;
                        }
                    }
                    & .article-content {
                        padding:1rem;flex:1 0 50%;
                        & h2 {
                            font-size:1.5rem;
                        }
                        & h3 {
                            margin-top:0;font-size:1.2rem;font-weight:bold;
                            & span {
                                display:block;font-size:.9rem;color:var(--blue);
                            }
                        }
                        & p {
                            margin-bottom:0;font-size:.9rem;
                        }
                        & a {
                            &.button {
                                margin:1rem 0 0 0;
                            }
                            &:not(.button) {
                                color:var(--blue);text-decoration:none;margin:1rem 0 0 1rem;display:inline-block;
                                &:hover, &:focus {
                                    color:var(--yellow);
                                }
                                &::before {
                                    content:'>';margin-right:.25rem;
                                }
                            }
                        }
                    }
                }
            }
        }
        &.block-membres {
            & .grid-container {
                & .cell {
                    & h2 {
                        text-align:center;
                    }
                    &:has(figure) {
                        display:flex;align-items:flex-end;gap:1rem;margin-bottom:1rem;
                        & figure {
                            margin-top:0;background:var(--orange);
                            &::before, &::after {
                                content:'';position:absolute;top:0;left:0;width:2rem;height:2rem;background:url('../img/angle.svg') top left no-repeat;background-size:contain;pointer-events:none;transform:rotate(0deg);z-index:1;
                            }
                            &::after {
                                top:auto;left:auto;bottom:0;right:0;transform:rotate(-180deg);
                            }
                            & img {
                                width:100%;height:100%;object-fit:cover;object-position:center;border-radius:.5rem;
                            }
                        }
                        & .member-content {
                            padding:1rem;flex:1 0 75%;
                            & h2 {
                                font-size:1.5rem;
                            }
                            & h3 {
                                margin-top:0;font-size:1.4rem;font-weight:bold;
                                & span {
                                    display:block;font-size:.9rem;color:var(--blue);
                                }
                            }
                            & p {
                                margin-bottom:0;font-size:.9rem;font-weight:bold;
                            }
                            & ul {
                                font-weight:bold;font-size:.9rem;
                            }
                            & a {
                                &.button {
                                    margin:1rem 0 0 0;
                                }
                                &:not(.button) {
                                    color:var(--blue);text-decoration:none;margin:0;display:inline-block;text-decoration:underline;
                                    &:hover, &:focus {
                                        color:var(--yellow);text-decoration:none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    & .swiper {
        &:has(.swiper-button-next), &:has(.swiper-button-prev) {
            padding-top:2rem;
        }
        & .swiper-button-next, & .swiper-button-prev {
            top:0;margin:0;
            & svg {
                display:none;
            }
        } 
        & .swiper-button-next {
            &::after {
                content:'\f061';font-family:'Font Awesome 6 Free';font-weight:900;font-size:1.5rem;color:var(--blue);
            }
        }
        & .swiper-button-prev {
            left:auto;right:2rem;
            &::after {
                content:'\f060';font-family:'Font Awesome 6 Free';font-weight:900;font-size:1.5rem;color:var(--blue);
            }
        }
    }
}

/* Responsive */
@media screen and (max-width:1180px) {
    body {
        & header {
            & nav {
                & ul.menu {
                    gap:.25rem;
                    & li {
                        font-size:1.1rem;
                        & a {
                            font-size:1.1rem;
                        }
                    }
                }
            }
            & h1 {
                font-size:3rem;
                & + p {
                    font-size: 1.3rem;
                }
            }
            & .membres-header {
                & .membre-header {
                    & figure {
                        aspect-ratio: 9 / 13;
                    }
                }
            }
        }
        & section {
            &[data-title="Geographic Map of the network"] {
                & figure {
                    & img {
                        width:70%;
                    }
                }
            }
            &.block-2-columns-reverse {
                & .grid-x {
                    & .cell {
                        &.text-content {
                            padding:2rem;
                        }
                    }
                }
            }
            &.block-membres {
                & .grid-container {
                    & .cell {
                        &:has(figure) {
                            & figure {
                                aspect-ratio: 9 / 13;
                            }
                        }
                    }
                }
            }
        }
        &:not(.home) {
            & header {
                & .large-5:has(figure) {
                    & figure {
                        height:100%;bottom:-10%;
                        & img {
                            object-fit:cover;object-position:center;width:100%;height:100%;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:1024px) {
    .grid-container {
        max-width:calc(100% - 4rem);
    }
    body {
        & header {
            margin-top: 2rem;
            & .angle-top {
                width:5rem;
            }
            & .angle-bottom {
                width:3rem;
            }
            & nav {
                & ul.menu {
                    gap:1rem;
                    & li {
                        padding-inline:0;
                    }
                }
            }
            & img[alt="header-africa"] {
                max-width:80%;
            }
            & h1 {
                & + p {
                    font-size:1.1rem;
                }
            }
        }
        & section {
            &[data-title="Geographic Map of the network"] {
                & figure {
                    & img {
                        width:80%;
                    }
                    & figcaption {
                        font-size:1.2rem;
                    }
                }
            }
            &[data-title="The 5 research axis"] {
                & .cell {
                    & > div, & > a {
                        & figure {
                            & figcaption {
                                font-size:1.1rem;line-height:1.1;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:980px) {
    body {
        & header {
            & nav {
                & ul.menu {
                    gap:1rem;
                    & li {
                        font-size:1rem;
                        & a {
                            font-size:1rem;
                        }
                    }
                }
            }
            & h1 {
                & + p {
                    font-size:1rem;
                }
            }
            & .membres-header {
                & .membre-header {
                    gap:.5rem;
                }
                & .member-content {
                    flex:1 0 70%;
                    & p {
                        font-size:.8rem;
                    }
                }
            }
        }
        & section {
            &[data-title="Last News"] {
                & .swiperNews {
                    & .swiper-wrapper {
                        align-items:flex-start;
                        & .swiper-slide {
                            flex-direction:column;
                            & figure {
                                width:100%;flex:1 0 100%;aspect-ratio:16/9;
                            }
                        }
                    }
                }
            }
            &.block-2-columns, &.block-2-columns-reverse {
                & .cell {
                    &.text-content {
                        padding-inline:2rem;
                        & > p, & > ul, & > ol, & > a {
                            margin-left: 2rem;
                        }
                    }
                    &:has(figure) {
                        & figure {
                            height:100%;
                        }
                    }
                }
            }
            &.block-2-columns-reverse {
                & .grid-x {
                    & .cell {
                        &.text-content {
                            & > p, & > ul, & > ol, & > a {
                                margin-right:2rem;
                            }
                        }
                    }
                }
            }
            &.block-membres {
                & .grid-container {
                    & .cell {
                        &:has(figure) {
                            & .member-content {
                                & p {
                                    font-size:.8rem;
                                }
                            }
                        }
                    }
                }
            }
            &.block-relations {
                & .swiperRelations {
                    & .swiper-wrapper {
                        align-items: flex-start;
                        & .swiper-slide {
                            flex-direction:column;
                            &:first-of-type {
                                &.swiper-slide-active {
                                    margin-left: 0;
                                }
                            }
                            & figure {
                                width: 100%;
                                flex: 1 0 100%;
                                aspect-ratio: 16 / 9;
                            }
                        }
                    }
                }
            }
        }
        &:not(.home) {
            & header {
                & h1 {
                    font-size:1.4rem;
                }
                & .large-5:has(figure) {
                    & figure {
                        bottom: -7.5rem;
                    }
                }
            }
        }
        &.single-projet {
            & section {
                &.block-2-columns, &.block-2-columns-reverse {
                    & .cell {
                        &:has(figure) {
                            & figure {
                                height:100%;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    body {
        & header {
            & nav {
                & label[for="menu-header"] {
                    display:block;
                }
                & input#menu-header {
                    &:checked {
                        & ~ .nav-container {
                            top:0;
                        }
                        & ~ label[for="menu-header"] {
                            & span {
                                background:white;
                                &:nth-child(1) {
                                    transform:rotate(45deg);
                                }
                                &:nth-child(2) {
                                    opacity:0;
                                }
                                &:nth-child(3) {
                                    transform:rotate(-45deg);
                                }
                            }
                        }
                    }
                }
                & .nav-container {
                    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1rem;position:fixed;top:-100vh;left:0;width:100%;height:100%;background:var(--orange);padding:1rem;z-index:999;padding-top:5vh;transition:top .3s ease-in-out;
                    & ul {
                        margin:0;
                        &.menu {
                            flex-direction:column;gap:1rem;align-items:center;justify-content:flex-start;width:100%;
                            &:not(.menu-top) {
                                border:0;margin-top:4rem;
                                & li {
                                    font-size:1.6rem;
                                    & a {
                                        font-size:1.6rem;
                                    }
                                    &:has(ul) {
                                        border:0;
                                        & ul {
                                            padding-inline:2rem;
                                            & li {
                                                font-size:1.4rem;
                                                & a {
                                                    font-size:1.4rem;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                            &.menu-top {
                                margin:0;
                                & li {
                                    font-size:1rem;line-height:1.2;
                                    & a {
                                        font-size:1rem;
                                    }
                                }
                            }
                            & li {
                                font-size:1.2rem;flex-direction:column;align-items:center;justify-content:center;
                                & a {
                                    font-size:1.2rem;
                                }
                                & ul {
                                    position:relative;top:auto;height:0;padding:0;overflow:hidden;
                                }
                                &:hover, &:focus-within {
                                    & ul {
                                        height:auto;padding:1rem 0;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        & section {
            &[data-title="Key figures"] {
                & .swiperKey {
                    & .swiper-wrapper {
                        justify-content:flex-start;
                    }
                }
            }
            & .cell.text-content {
                & > p, & > ul, & > ol, & > a {
                    margin-left:2rem;
                }
            }
            &.block-2-columns, &.block-2-columns-reverse {
                & .cell {
                    &.text-content {
                        padding-inline:1rem;
                    }
                }
            }
            &.block-2-columns-reverse {
                & .grid-x {
                    & .cell {
                        &.text-content {
                            & > p, & > ul, & > ol, & > a {
                                margin-right:0;
                            }
                        }
                    }
                }
            }
        }
    }
}