@import url('variables.css');
@import url('form.css');

/* Fonts */
@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DINPro';
    src: url('../fonts/DINPro-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {font-family:'SocialMediaCircled';src:url('../fonts/Social-Media-Circled.woff') format('woff');font-style:normal;font-weight:normal;}

/* Global Styles */
body {font-family:'DINPro';}

a {
    color:var(--txt-color);text-decoration:none;
    &:hover, &:focus {
        color:var(--dark-green);text-decoration:none;
    }
    &.button {
        display:block;padding:0.5rem 1rem;background:var(--green);border:2px solid transparent;color:white;border-radius:var(--border-radius);transition:var(--transition);text-decoration:none;margin-inline:auto;width:fit-content;
        &:hover, &:focus {
            background:white;color:var(--txt-color);border-color:var(--green);
        }
        &.pdf, &.link {
            width:100%;max-width:40rem;position:relative;background:#d7ebfc;color:var(--txt-color);border-color:#d7ebfc;text-align:left;padding:1rem;margin-bottom:.5rem;margin-inline:auto;border-radius:var(--border-radius);font-size:1rem;cursor:pointer;padding-right:3rem;
            &::after {
                content:'\f1c1';font-family:'FontAwesome';position:absolute;top:.5rem;right:.5rem;background:var(--dark-green);color:white;border-radius:var(--border-radius);font-size:1.2rem;transition:var(--transition);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;aspect-ratio:1;
            }
            &:hover {
                &::after {
                    animation: buttonPDFhover .75s ease-in-out forwards;
                }
            }
        }
        &.link {
            &::after {
                content:'\f35d';font-size:1rem;
            }
        }
        &.plus {
            width:100%;max-width:40rem;position:relative;background:white;color:var(--txt-color);border-color:white;text-align:left;padding:1rem;margin-bottom:.5rem;
            &::after {
                content:'+';position:absolute;top:.5rem;right:.5rem;background:var(--dark-green);color:white;border-radius:1rem;font-size:1.5rem;transition:var(--transition);width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;aspect-ratio:1;
            }
            &:hover {
                &::after {
                    animation:buttonPlusHover .75s ease-in-out forwards;
                }
            }
        }
    }
    &[disabled] {
        pointer-events:none;
    }
}

.social {
    font-family:'SocialMediaCircled';font-size:2rem;font-weight:normal;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family:'DINPro';font-weight:bold;color:var(--green);line-height:1.1;width:100%;text-align:center;
    & span {
        display:block;font-size:75%;color:var(--dark-green);
        &.villes, &.institutions {
            text-transform:uppercase;font-size:.8rem;font-weight:normal;padding:.25rem 0;
        }
        &.villes {
            font-weight:bold;
        }
    }
}
h1 {
    font-size:1.8rem;
    & + div {margin-left:4rem;width:100%;}
}
h2 {
    font-size:1.6rem;
}
p {
    max-width:40rem;margin-inline:auto;
}
p, ul, ol {
    font-size:.9rem;line-height:1.2;
}

.grid-container {
    max-width:calc(100% - 4rem);margin-inline:auto;padding-inline:1rem;
}

.social {
    display:flex;flex-direction:column;justify-content:flex-end;gap:.25rem;margin:0;max-width:100%;font-family:'SocialMediaCircled';font-weight:normal;margin-bottom:1rem;
    & a {
        font-size:1.6rem;color:var(--color-secondary);background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;aspect-ratio:1;width:1.6rem;height:fit-content;line-height:1;transition:var(--transition);text-decoration:none;
        &:hover {color:var(--txt-color);}
    }
}

header {
    position:relative;background:url('../img/bg-header.jpg') no-repeat center var(--dark-green);background-size:cover;border-radius:calc(var(--border-radius)*1.5);padding:0 1rem;margin-top:2rem;margin-bottom:0;z-index:1;
    & img {
        pointer-events:none;
        &.logo {
            width:29%;display:block;
        }
    }
    & div:has(nav) {
        display:flex;align-items:center;justify-content:flex-end;
        & nav {
            width:100%;
            & ul {
                display:flex;justify-content:flex-end;align-items:center;margin:0;width:100%;position:relative;z-index:9;gap:1rem;
                & li {
                    list-style:none;text-transform:uppercase;font-size:1rem;font-weight:500;position:relative;
                    & a {
                        display:block;color:var(--green);text-decoration:none;border-radius:var(--border-radius);padding:0 1rem;line-height:2;background:white;border:2px solid white;
                        &:hover, &:focus, &.active, &[aria-current] {
                            background:var(--dark-green);color:white;border:2px solid white;
                        }
                        &[href="#menu"] {
                            font-size:0;
                            &::after {
                                content:'\f0c9';font-family:'FontAwesome';font-size:1rem;color:var(--green);display:block;
                            }
                            &:hover, &:focus {
                                &::after {
                                    color:white;
                                }
                            }
                        }
                    }
                    & ul {
                        position:absolute;top:100%;left:0;min-width:100%;width:fit-content;background:white;padding:1rem;display:none;border-radius:var(--border-radius);
                        & li {
                            white-space:nowrap;
                        }
                    }
                    &:has(.sub-menu) {
                        &:hover {
                            & > a {
                                border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-left-radius:calc(var(--border-radius)/1.5);border-top-right-radius:calc(var(--border-radius)/1.5);
                                &[href="#"] {
                                    background:white;color:var(--dark-green);
                                    &::after {
                                        content:'';position:absolute;bottom:-1px;left:0;width:100%;height:1px;background:white;z-index:2;
                                    }
                                }
                            }
                            & ul {
                                display:flex;left:auto;right:0;padding:.5rem;border-top-right-radius:0;border-top:1px solid var(--dark-green);z-index:1;
                            }
                        }
                    }
                    &.wpml-ls-item {
                        & a {
                            display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;border-radius:50%;overflow:hidden;padding:.25rem;
                            &:hover {background:none;}
                            & img {
                                width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;display:block;
                            }
                        }
                        &:hover {
                            & ul {
                                padding:.5rem 0;
                            }
                        }
                    }
                }
                &.menu > li:nth-child(n+4):nth-child(-n+10) {
                    display:none;
                }
            }
        }
    }
    & .grid-padding-x {
        width:100%;margin-inline:0!important;
        & .grid-padding-x {
            margin-inline:0;padding-inline:1rem;
        }
        & + .grid-padding-x {
            margin-top:2rem;
        }
    }
    & .large-6:not(:has(img)) {
        padding-top:4rem;padding-bottom:2rem;
        & p {
            max-width:30rem;margin-left:0;
        }
    }
    & .large-5 {
        position:relative;display:flex;align-items:flex-end;justify-content:center;
        & > div {
            background:white;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding:1rem;position:relative;
            & a.button {
                margin-inline:auto;background:var(--dark-green);color:white;border-color:transparent;margin-bottom:0;
                &:hover {
                    background:white;color:var(--txt-color);border-color:var(--dark-green);
                }
            }
        }
    }
    & h1, & h2, & p, & ul, & ol {color:white;}
    & a.button {
        background:white;color:var(--txt-color);border-color:white;margin-left:0;
        &:hover, &:focus {
            background:var(--dark-green);color:white;border-color:transparent;
        }
    }
    & + ul.menu-mobile {
        display:none;position:absolute;top:6.5rem;right:6.5rem;background:white;border-radius:calc(var(--border-radius) / 2);padding:1rem;box-shadow:0 0 10px rgba(0, 0, 0, 0.1);z-index:0;margin-top:3rem;left:auto;padding:2rem;transition:all 1s ease-in-out;opacity:0;pointer-events:none;
        & li {
            text-transform:none;
            & + li {
                margin-top:.5rem;
            }
        }
    }
    &:has(input[type="checkbox"]:checked) {
        & + ul.menu-mobile {
            display:block;margin-top:0;opacity:1;pointer-events:auto;
        }
    }
}

body {
    &.menu-open {
        overflow:hidden;
        & header {
            z-index:99;
            & div:has(nav) {
                & nav {
                    position:fixed;top:0;left:0;width:100%;height:100vh;padding:0;background:var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;
                    & ul {
                        flex-direction:column;gap:2rem;
                        & li:not(.wpml-ls-item) {
                            & a {
                                font-size:1.4rem;padding:0;color:white;background:none;text-align:center;border:0;
                                &:hover, &:focus, &.active, &[aria-current] {
                                    color:var(--dark-green);
                                }
                            }
                            &:has(.sub-menu) {
                                & ul {
                                    position:relative;display:flex;flex-direction:column;top:0;left:0;background:none;border:1px solid white;padding:1rem 2rem;gap:1rem;margin-top:1rem;
                                    & a {
                                        font-size:1.2rem;
                                        &:hover, &:focus, &.active, &[aria-current] {
                                            color:var(--dark-green);
                                        }
                                    }
                                    &::before {
                                        content:'';position:absolute;top:-1rem;left:50%;transform:translateX(-50%);width:1px;height:1rem;background:white;
                                    }
                                }
                                &:hover {
                                    & > a {
                                        border-radius:var(--border-radius);
                                        &[href="#"] {
                                            background:none;color:white;
                                            &::after {
                                                display:none;
                                            }
                                        }
                                    }
                                }
                                &:hover {
                                    & ul {
                                        border-radius:var(--border-radius);
                                    }
                                }
                            }
                            &:nth-child(n+4):nth-child(-n+10) {
                                display:block;
                            }
                            &:has([href="#menu"]) {
                                position:fixed;top:1rem;right:1rem;
                                & a {
                                    font-size:0;color:white;
                                    &::after {
                                        color:white;content:'\f00d';font-size:2rem;
                                    }
                                }
                            }
                        }
                        & li.wpml-ls-item {
                            display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%;gap:1rem;
                            & ul.sub-menu {
                                display:block;padding:0;min-width:0;position:relative;top:0;left:0;
                            }
                            & a {
                                border-radius:50%!important;
                                &:hover {
                                    background:var(--dark-green);
                                }
                            }
                            &:hover {
                                & ul {
                                    border-radius:var(--border-radius);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &.home {
        & header {
            display:flex;aspect-ratio:1780/294;
            &::after {
                content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:url('../img/after-header.svg') no-repeat center;background-size:cover;border-radius:var(--border-radius);pointer-events:none;
            }
            & .grid-padding-x {
                & + .grid-padding-x {
                    margin-top:0;
                }
            }
            & img {
                &.logo {
                    width:35%;
                }
            }
            & nav {
                padding-bottom:15%;
            }
        }
        & main {
            position:relative;z-index:1;
            & section {
                &#header {
                    & .cell {
                        &:nth-child(1) {
                            & strong {
                                font-size:1.4rem;color:var(--green);
                            }
                            & img:not(.bg-encart) {
                                max-width:8rem;margin-bottom:1rem;
                            }
                        }
                        &:nth-child(2) {
                            padding-top:13rem;
                        }
                    }
                }
            }
        }
    }
    &.is-iframe {
        & header, & footer, & .bt-retour {
            display:none;
        }
    }
    &.page-template-page-explorer-par-themes, &.page-template-page-nos-formations {
        & select#themes {
            border-radius: var(--border-radius);border: 1px solid var(--green);padding: .5rem 1rem;font-size: 1rem;width: 100%;font-weight: 500;color: var(--green);height: auto;line-height: 2;margin:0;text-transform:uppercase;background:none;appearance:none;
        }
    }
    &.page-template-page-explorer-par-pays {
        & #search-bar {
            position:absolute;width:30rem;left:calc(50% - 15rem);bottom:10%;padding:1rem 2rem;background:white;border-radius:var(--border-radius);z-index:1;scroll-margin-top:2rem;
            & > span {
                display:block;text-transform:uppercase;font-size:1rem;font-weight:normal;color:var(--green);background:white;border-radius:var(--border-radius);position:absolute;top:-1rem;padding-inline:1rem;font-weight:500;line-height:2;
            }
            & ul {
                display:flex;justify-content:space-between;align-items:center;margin:0;padding:0;
                & li {
                    list-style:none;text-transform:uppercase;font-size:1rem;font-weight:normal;width:100%;
                    & input, & select, & label {
                        border-radius:var(--border-radius);border:1px solid var(--green);padding:.5rem 1rem;font-size:1rem;width:100%;font-weight:500;color:var(--green);height:auto;line-height:2;margin:0;text-transform:uppercase;
                        &[type="checkbox"] {
                            display:none;
                            & + label {
                                text-align:center;
                            }
                            &:checked + label {
                                background:var(--green);color:white;
                                &[for="enseignement"] {
                                    background:var(--enseignement);border-color:transparent;
                                }
                                &[for="recherche"] {
                                    background:var(--recherche);border-color:transparent;
                                }
                                &[for="expertise"] {
                                    background:var(--expertise);border-color:transparent;
                                }
                            }
                        }
                    }
                    &:has(select){
                        position:relative;
                        &::after {
                            content:'\f107';font-family:"Font Awesome 6 Free";font-weight:600;position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--blue);pointer-events:none;
                        }
                        & select {
                            appearance:none;background:none;
                        }
                    }
                }
            }
        }
        & #selection-pays {
            color:var(--green);
            & object {
                display:block;max-width:60%;margin-inline:auto;aspect-ratio:1;margin-bottom:2rem;pointer-events:none;
            }
            & h2 {text-align:center;}
            & ul {
                margin:0;margin-bottom:2rem;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;
                & li {
                    list-style:none;text-transform:uppercase;font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;
                    & a {
                        display:block;color:var(--green);text-decoration:none;padding-inline:1rem;border-radius:var(--border-radius);line-height:2;text-align:center;font-size:.85rem;
                        &:hover {
                            background:var(--dark-green);color:white;
                        }
                    }
                    &::after {
                        content:'-';display:block;margin-inline:auto;width:fit-content;
                    }
                    &:last-child::after {
                        content:'';
                    }
                }
            }
        }
        & #pays-selectionne {
            max-width:var(--width-container);margin-inline:auto;overflow:hidden;max-height:0;transition:all 1.5s ease-in-out;scroll-margin-top:3rem;
            & .bt-retour {
                display:none;max-width:fit-content;margin-inline:auto;background:white;color:var(--blue);
            }
            &.open {
                max-height:500vh;
                & .bt-retour {
                    display:block;
                }
            }
            & .grid-x {
                background:white;border-radius:var(--border-radius);padding:2rem;margin-inline:.9375rem;
            }
            & h2, & h3 {
                text-align:left;color:var(--dark-green);text-transform:uppercase;border-top:1px solid var(--dark-green);border-bottom:1px solid var(--dark-green);padding:1rem 0;margin:1rem 0;
                &:first-of-type {
                    border-top:0;
                }
                & ~ * {
                    max-width:90%;margin-inline:auto;
                }
            }
            & p {
                &.domaine {
                    border-radius:var(--border-radius);background:var(--grey);width:fit-content;padding:0 2rem;line-height:2;margin-left:0;font-size:.8rem;font-weight:500;text-transform:uppercase;
                }
            }
            & object {
                pointer-events:none;
            }
            & .themes {
                & ul {
                    margin:0 auto;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:.5rem;
                    & li {
                        border-radius:var(--border-radius);background:var(--grey);text-align:center;list-style:none;width:fit-content;min-width:var(--width-container);line-height:2;padding-inline:2rem;margin-bottom:.5rem;font-weight:500;
                    }
                }
            }
            & .equipes {
                & p {
                    &:has(a[href]) {
                        display:flex;justify-content:flex-start;align-items:center;gap:.5rem;flex-wrap:wrap;
                    }
                    & a {
                        &::after {
                            content:'-';display:inline-block;margin-inline:.25rem -.25rem;width:fit-content;
                        }
                        &:last-child::after {
                            content:'';
                        }
                    }
                }
            }
            & .domaines, & .pays {
                & ul {
                    margin:0;padding:0;display:flex;justify-content:flex-start;align-items:center;flex-direction:row;flex-wrap:wrap;gap:1rem;max-width:100%;width:100%;
                    & li {
                        border-radius:var(--border-radius);background:var(--grey);text-align:center;list-style:none;width:fit-content;line-height:2;padding-inline:2rem;margin-bottom:.5rem;font-weight:500;text-transform:uppercase;
                    }
                }
            }
            & .galerie {
                display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1rem;flex-wrap:wrap;max-width:100%;width:100%;
                & a {
                    display:block;flex:1 1 calc(100%/3 - 1rem);max-width:calc(100%/3 - 1rem);height:auto;aspect-ratio:1;object-fit:cover;object-position:center;position:relative;
                    & img {
                        & + .caption {
                            display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#1472f8c4;color:white;align-items:center;justify-content:center;font-size:.8rem;font-weight:500;padding:.5rem;text-align:center;border-radius:var(--border-radius);
                        }
                    }
                    &:hover {
                        & img {
                            & + .caption {
                                display:flex;
                            }
                        }
                    }
                }
                & img {
                    flex:1 1 100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:var(--border-radius);
                }
            }
            & div {
                &.cell {
                    margin-bottom:1rem;
                    &.bg-blue {
                        padding:1rem 2rem 2rem 2rem;
                        & h2, & h3 {
                            border:0;color:white;
                        }
                        & a {
                            color:white;
                        }
                        & .contacts {
                            text-transform:uppercase;font-weight:500;
                        }
                    }
                    &.resume {
                        & p {
                            max-width:90%;margin-inline:auto;
                        }
                    }
                }
                &.activites-groupe {
                    margin-bottom:2rem;max-width:100%;
                    &:last-of-type {
                        margin-bottom:0;
                    }
                    & article {
                        border-radius:var(--border-radius);padding:1rem 2rem;
                        &:hover {
                            background: var(--grey);
                        }
                    }
                }
            }
        }
    }
    &.single-activite, &.tax-pays {
        & main {
            & section {
                &#header {
                    & .cell {
                        &:nth-child(1) {
                            & img {
                                max-width:10rem;margin-bottom:2rem;
                            }
                        }
                        &:nth-child(2) {
                            & object {
                                max-height:90%;width:auto;
                            }
                            & p {
                                & span[data-country] {
                                    display:inline-block;margin:.25rem;padding:.25rem .5rem;background:var(--green);color:var(--light-green);border-radius:var(--border-radius);font-weight:500;text-transform:uppercase;font-size:.75rem;
                                }
                            }
                        }
                    }
                }
                & object {
                    pointer-events:none;
                }
                & .large-4:has(object) {
                    & p {
                        text-align:center;
                        & span[data-country] {
                            display:inline-block;margin:.25rem;padding:.25rem .5rem;background:var(--green);color:var(--light-green);border-radius:var(--border-radius);font-weight:500;text-transform:uppercase;font-size:.75rem;
                        }
                    }
                }
                & .large-8 {
                    & img {
                        max-width:15rem;margin-bottom:1rem;
                    }
                }
                & h1 {
                    text-align:left;margin-bottom:1rem;
                }
                & p {
                    &.statut {
                        text-transform:uppercase;font-weight:500;text-align:left;max-width:100%;
                    }
                    &.ctas {
                        display:flex;justify-content:flex-start;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem;max-width:100%;
                        & a {
                            flex:1 1 calc(100%/3 - .5rem);max-width:calc(100%/3 - .5rem);margin:0;
                        }
                    }
                }
                & .resume {
                    margin-top:2rem;
                }
                & .swiper {
                    & .swiper-wrapper {
                        align-items:center;justify-content:center;
                    }
                }
                & .themes {
                    & ul {
                        margin:0 auto 2rem auto;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;width:100%;
                        & li {
                            border-radius:var(--border-radius);background:var(--green);color:var(--light-green);text-align:center;list-style:none;width:fit-content;min-width:var(--width-container);line-height:2;padding-inline:2rem;margin-bottom:.5rem;font-weight:500;
                        }
                    }
                }
                & .domaines, & .pays {
                    & ul {
                        margin:0 auto 2rem auto;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:row;flex-wrap:wrap;gap:1rem;max-width:100%;width:100%;
                        & li {
                            border-radius:var(--border-radius);background:var(--green);color:var(--light-green);text-align:center;list-style:none;width:fit-content;line-height:2;padding-inline:2rem;margin-bottom:0;font-weight:500;text-transform:uppercase;
                        }
                    }
                }
                & .galerie {
                    display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1rem;flex-wrap:wrap;max-width:100%;width:100%;
                    & a {
                        display:block;flex:1 1 calc(100%/3 - 1rem);max-width:calc(100%/3 - 1rem);height:auto;aspect-ratio:1;object-fit:cover;object-position:center;position:relative;
                        & img {
                            & + .caption {
                                display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#1472f8c4;color:white;align-items:center;justify-content:center;font-size:.8rem;font-weight:500;padding:.5rem;text-align:center;border-radius:var(--border-radius);
                            }
                        }
                        &:hover {
                            & img {
                                & + .caption {
                                    display:flex;
                                }
                            }
                        }
                    }
                    & img {
                        flex:1 1 100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:var(--border-radius);
                    }
                }
            }
        }
    }
    &.page-template-page-publications-ressources {
        & main {
            & section {
                & .filterRessources {
                    display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center;
                    & a.button {
                        margin:0;
                    }
                }
                & p {
                    &[data-section] {
                        font-size:1.4rem;font-weight:bold;color:var(--green);margin-top:1rem;margin-bottom:1rem;
                    }
                }
                & ul {
                    display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;align-items:flex-start;
                    & li {
                        flex:0 0 calc(33.333% - 1rem);max-width:calc(33.333% - 1rem);list-style:none;
                        & > a {
                                background-color:var(--dark-green);padding:1rem;border-radius:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;cursor:pointer;color:white;transition:var(--transition);
                                & .ressource_apercu {
                                    display:flex;height:150px;margin-bottom:1rem;
                                }
                                & p {
                                    font-weight:bold;
                                }
                        }
                    }
                }
            }
        }
    }
}

main {
    display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-evenly;margin:0;
    &.grid-container {
        padding-inline:0;align-items:stretch;
        &:not(.full) > .grid-padding-x {
            margin-inline:0;padding-inline:0;
        }
    }
    & section {
        position:relative;border-radius:var(--border-radius);padding:2rem;width:100%;background:var(--light-grey);
        & .grid-x.reverse {
            flex-direction:row-reverse;
        }
        & .large-12 {
            & h2 {
                margin-bottom:2rem;
            }
            & h2, & p {
                text-align:center;
            }
        }
        &#header {
            gap:1rem;padding:1rem 0 0 0;background:none;
            & .cell {
                background:var(--light-grey);border-radius:var(--border-radius);padding:2rem;flex:0 0 calc(50% - .5rem);position:relative;overflow:hidden;
                & * {
                    position:relative;z-index:1;
                }
                & img.bg-encart {
                    position:absolute;top:0;left:0;width:200%;max-width:none;height:100%;z-index:0;object-fit:cover;object-position:top left;border-radius:var(--border-radius);z-index:0;pointer-events:none;
                }
                &:nth-child(2) {
                    margin-top:-5.25rem;clip-path: polygon( 94.559% 0%,33.238% 0%,33.238% 0%,32.326% 0.116%,31.461% 0.452%,30.654% 0.991%,29.917% 1.712%,29.262% 2.599%,28.7% 3.633%,28.243% 4.796%,27.902% 6.07%,27.689% 7.435%,27.616% 8.875%,27.616% 8.875%,27.616% 8.875%,27.542% 10.314%,27.329% 11.68%,26.988% 12.953%,26.531% 14.116%,25.969% 15.15%,25.314% 16.037%,24.577% 16.759%,23.77% 17.297%,22.905% 17.633%,21.993% 17.749%,5.622% 17.749%,5.622% 17.749%,4.71% 17.865%,3.845% 18.202%,3.039% 18.74%,2.302% 19.462%,1.647% 20.349%,1.085% 21.383%,0.628% 22.546%,0.287% 23.819%,0.074% 25.184%,0% 26.624%,0% 91.125%,0% 91.125%,0.074% 92.565%,0.287% 93.93%,0.628% 95.203%,1.085% 96.366%,1.647% 97.4%,2.302% 98.287%,3.039% 99.009%,3.845% 99.547%,4.71% 99.884%,5.622% 100%,94.482% 100%,94.482% 100%,95.394% 99.884%,96.259% 99.547%,97.066% 99.009%,97.802% 98.287%,98.457% 97.4%,99.019% 96.366%,99.477% 95.203%,99.818% 93.93%,100.031% 92.565%,100.104% 91.125%,100.104% 43.762%,100.182% 43.762%,100.182% 8.875%,100.182% 8.875%,100.108% 7.435%,99.895% 6.07%,99.554% 4.796%,99.097% 3.633%,98.535% 2.599%,97.88% 1.712%,97.143% 0.991%,96.337% 0.452%,95.471% 0.116%,94.559% 0%,94.559% 0% );aspect-ratio:500/317;
                    & img.bg-encart {
                        object-position:top right;left:-100%;
                    }
                }
            }
        }
        &.header {
            margin-top:1rem;
        }
        & h1 {
            margin-bottom:2rem;
        }
        &#faq {
            & p, & ul, & ol {
                text-align:left;width:100%;
            }
        }
        & .cell {
            & details {
                & p, & ul, & ol {
                    text-align: left;
                    width: 100%;
                    &:not(:last-of-type) {
                        margin-bottom:1rem;
                    }
                    & li {
                        margin-bottom:.5rem;
                    }
                }
                & ul {
                    padding-left:2rem;margin-left:0;
                }
            }
        }
        &#carte {
            background:var(--light-grey);
            & .map-container, & #list-container {
                width:100%;height:50rem;border-radius:var(--border-radius);padding:1rem;background:white;
                & #mapMapbox {
                    width:100%;height:100%;border-radius:calc(var(--border-radius)/1.5);
                }
            }
            & #list-container {
                overflow-y:auto;padding:1rem;border-radius:calc(var(--border-radius)/2);background:white;
                & article {
                    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:1rem;padding:1rem;border-radius:calc(var(--border-radius)/1.5);background:var(--light-green);margin-bottom:.5rem;color:#00636c;
                    & img {
                        width:5rem;margin:0 1rem 1rem 0;
                        & + div {
                            flex:0 0 calc(100% - 7rem);
                        }
                    }
                    & h3 {
                        color:var(--txt-color);font-size:1.1rem;margin-bottom:0;text-align:left;
                    }
                    & .buttons {
                        display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:flex-start;width:100%;
                        & .button {
                            background:var(--green);color:white;border-color:transparent;margin-inline:0;
                            &:hover, &:focus {
                                background:var(--dark-green);
                            }
                        }
                    }
                    &.highlight, &:hover {
                        background:var(--light-grey);color:#0a0049;
                    }
                }
                /* Largeur de la scrollbar */
                &::-webkit-scrollbar {
                    width:5px;
                }
                /* Rail (fond) */
                &::-webkit-scrollbar-track {
                    background:none;
                }
                /* Curseur (thumb) */
                &::-webkit-scrollbar-thumb {
                    background:#1ca7ae;border-radius:10px;width:10px;
                }
                /* Hover sur le curseur */
                &::-webkit-scrollbar-thumb:hover {
                    background:var(--dark-green);
                }
            }
        }
        &.block-encart-popup {
            & .cell:has(a[data-src]) {
                display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
                & a[data-src] {
                    display:flex;flex:0 0 calc(100%/4 - 1rem);aspect-ratio:1;flex-direction:column;align-items:center;justify-content:center;background:white;border-radius:var(--border-radius);padding:1rem;transition:var(--transition);text-align:center;
                    &:hover {
                        transform:translateY(-5px);background:var(--light-green);
                        & img {
                            mix-blend-mode:multiply;
                        }
                    }
                    & img {
                        margin-bottom:1rem;
                    }
                }
                & .popup-content {
                    display:none;
                }
            }
        }
        &#liens {
            background:none;gap:0 2rem;padding:0;
            & .cell {
                padding:0;width:fit-content;flex:0 0 calc(100%/2 - 1rem);
                & > div {
                    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;background:var(--medium-green);border-radius:var(--border-radius);padding:2rem;position:relative;color:white;text-align:center;width:100%;height:100%;aspect-ratio:864/388;
                }
                & img {
                    position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:center;border-radius:var(--border-radius);opacity:.4;mix-blend-mode:soft-light;
                }
                & * {
                    position:relative;z-index:1;
                }
                & span {
                    display:block;margin-bottom:1rem;font-size:2.4rem;text-transform:uppercase;font-weight:bold;line-height:1.1;margin-bottom:1rem;width:100%;
                    /*
                    &::first-line {
                        font-size:60%;
                    }
                    */
                }
                & a {
                    &.button {
                        background:white;color:var(--green);font-weight:bold;text-transform:uppercase;min-width:50%;
                        &:hover, &:focus {
                            background:var(--green);color:white;
                        }
                    }
                }
            }
        }
        &#actualites {
            background:white;
            & h2 {
                margin-bottom:1rem;
            }
            & .swiper-wrapper {
                height:fit-content;
            }
            & .cell:has(.swiper-pagination) {
                position:relative;padding-top:2rem;
            }
            & article {
                border-radius:var(--border-radius);padding:1rem;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:2rem;flex-wrap:wrap;height:fit-content;box-sizing:border-box;padding-bottom:6rem;
                & img {
                    width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:calc(var(--border-radius)*1.5);margin:0;flex:0 0 100%;
                }
                & .actualite-content {
                    flex:0 0 100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
                }
                & h3 {
                    font-size:1.3rem;font-weight:normal;margin-bottom:.5rem;text-align:left;color:var(--green);
                }
                & p {
                    flex-grow:1;text-align:left;margin-bottom:1rem;width:100%;text-align:justify;
                    &.date {
                        margin-bottom:0;text-transform:capitalize;color:var(--dark-green);
                    }
                }
                & a.read-more {
                    &::before {
                        content:'\f054';font-family:"Font Awesome 6 Free";font-weight:900;margin-right:.5rem;font-size:50%;vertical-align:middle;
                    }
                }
            }
        }
        &#chiffres {
            background:var(--medium-green);padding:0;
            & * {
                position:relative;z-index:1;
            }
            & img.bg-encart {
                position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;object-fit:cover;object-position:top;border-radius:var(--border-radius);z-index:0;pointer-events:none;
            }
            & .large-5 {
                &::before {
                    content:'';position:absolute;top:-.5px;left:-1px;width:100%;height:100%;background:url('../img/bg-header-top-left.svg') no-repeat top left;background-size:contain;z-index:1;pointer-events:none;
                }
                padding-inline:0;
                & a.liens-membres {
                    display:flex;background:var(--green);color:white;border-radius:var(--border-radius);padding:1rem;text-align:center;font-weight:bold;text-transform:uppercase;width:90%;height:4.75rem;align-items:center;justify-content:center;transition:var(--transition);font-size:1.4rem;
                    &:hover, &:focus {
                        background:var(--dark-green);
                    }
                }
            }
            & .large-7 {
                display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4rem;padding-top:2rem;padding-bottom:2rem;
                & .chiffre-item {
                    flex:0 0 calc(100%/3 - 4rem);text-align:center;color:white;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;padding:1rem;border:2px solid white;line-height:1.1;font-weight:bold;
                    & span {
                        display:block;font-size:2.4rem;
                    }
                }
            }
        }
        &.partenaires {
            background:none;margin-bottom:2rem;
            & .swiper-wrapper {
                box-sizing:border-box;
            }
            & img {
                background:#07a9b1;padding:1rem;border-radius:50%;
            }
        }
        &:empty {
            padding:0;
        }
        &:has(.dropdown-checkboxes) {
            z-index:2;
            & .cell:has(.dropdown-checkboxes) {
                display:flex;justify-content:center;align-items:center;gap:1rem;
            }
            & .dropdown-checkboxes {
				position: relative;
				display: inline-block;
				width: 100%;
                color:var(--green);
                &:hover {
                    & label, & .dropdown-menu {
                        border-color: var(--dark-green);
                        & i {
                            color: var(--dark-green);
                        }
                    }
                }
				& .dropdown-toggle {
					width: 100%;
					padding: 12px 20px;
					background-color: #fff;
                    border: 2px solid var(--green);
                    border-radius: 1.7rem;
					cursor: pointer;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 1rem;
                    font-weight: bold;
                    color: var(--dark-green);
					&:hover {
						background-color: #f5f5f5;
					}
					& i {
						transition:transform 0.3s ease;color:var(--green);
					}
                    &:has(+ input[type="checkbox"]:checked) {
                        border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom-color:transparent;
                        & i {
                            transform: rotate(180deg);
                        }
                    }
				}
				& .dropdown-menu {
					display: none;
					position: absolute;
					top: 100%;
					left: 0;
					right: 0;
					background-color: #fff;
					border: 2px solid var(--green);
					border-top: none;
					border-radius: 0 0 1.7rem 1.7rem;
                    margin-top: -2px;
					max-height: 300px;
					overflow-y: auto;
					z-index: 9;
					box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				}
				& input[type="checkbox"]:checked ~ .dropdown-menu {
					display: block;
				}
				& .dropdown-item {
					display: flex;
					align-items: center;justify-content:flex-start;gap:.5rem;
					padding: 10px 20px;
					cursor: pointer;
					transition: background-color 0.2s ease;
                    color: var(--dark-green);
					&:hover {
						background-color: #f5f5f5;
					}
					& input[type="checkbox"] {
						margin:0;cursor:pointer;appearance: none;
                        border: 1px solid var(--green);
                        width: 1rem;
                        aspect-ratio: 1;
                        border-radius: 50%;
                        &:checked {
                            background-color: var(--green);
                            border-color: var(--green);
                            position: relative;
                            &::after {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                width: .35rem;
                                height: .35rem;
                                background-color: white;
                                border-radius: 50%;
                            }
                        }
					}
					& span {
						flex: 1;
					}
				}
			}
        }
    }
}

body:not(.home) {
    & header {
        background-size:contain;
        &::before {
            content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,rgba(0, 71, 76, 0) 0%, rgba(0, 71, 76, 1) 100%);z-index:0;border-radius:calc(var(--border-radius)*1.5);pointer-events:none;
        }
        & > * {
            position:relative;z-index:1;
        }
        & h1 {
            font-size:1.4rem;padding-left:3rem;margin-bottom:2rem;
            &::first-line {
                text-transform:uppercase;font-size:150%;
            }
        }
    }
}

body.page-template-page-explorer-par-themes, body.page-template-page-nos-activites, body.page-template-default, body.page-template-page-reseau-frogh, body.page-template-page-actualites, body.page-template-page-nos-formations, body.page-template-page-explorer-par-institution {
    & main {
        & section {
            &#activites {
                background:none;
            }
            & .activites-groupe {
                margin-bottom:2rem;position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:1rem;
                &:last-of-type {
                    margin-bottom:0;
                }
                & article {
                    position:relative;flex:0 0 calc(100%/4 - 1rem);background:var(--light-grey);border-radius:var(--border-radius);padding:2rem 2rem 6rem 2rem;text-align:center;
                    &::before {
                        content:attr(data-domaine);text-transform:uppercase;font-size:.8rem;
                    }
                    & img {
                        aspect-ratio:1;object-fit:contain;object-position:center;margin-bottom:1rem;background:white;border-radius:var(--border-radius);;
                    }
                    & p:has(a.button) {
                        position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);width:calc(100% - 4rem);
                        & a.button {
                            margin-bottom:0;
                        }
                    }
                    &:hover {
                        background:var(--light-green);
                    }
                }
            }
            &#formations {
                background:none;
                & .activites-groupe {
                    & article {
                        &::before {
                            content:attr(data-type_de_formation);
                        }
                        &[data-bourses] {
                            border:1px solid var(--dark-green);
                            &::after {
                                content:'Ouvert aux bourses';position:absolute;top:0;right:50%;background:var(--dark-green);color:white;padding:.25rem .5rem;font-size:.7rem;border-radius:var(--border-radius);transform:translateX(50%) translateY(-50%);
                            }
                        }
                        & h2 {
                            font-size:1.4rem;
                        }
                    }
                }
            }
        }
    }
}

body.single-formation {
    & main {
        & section {
            &.institutions, &.logos-partenaires {
                & .grid-x {
                    align-items:center;justify-content:center;
                    & .large-3 {
                        text-align:center;
                    }
                }
            }
            &.infos {
                & h2 {
                    text-align:left;;
                }
                & article {
                    background:white;border-radius:var(--border-radius);padding:1.5rem;margin-bottom:1rem;
                    & strong {
                        color:var(--dark-green);
                    }
                }
                & .bloc-gauche {
                    background:white;border-radius:var(--border-radius);padding:2rem;width:calc(50% - 2rem);
                }
                & .bloc-droit {
                    background:var(--green);color:white;border-radius:var(--border-radius);padding:2rem;width:calc(50% - 2rem);
                }
                &.grid-container:not(.full)>.grid-padding-x:has(.bloc-gauche, .bloc-droit) {
                    justify-content:center;gap:2rem;padding-inline:1rem;
                }
            }
            &.informations-contact {
                & h2 {
                    margin-bottom:1rem;
                }
                & .contacts {
                    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 1rem;
                    & a.button {
                        margin-inline:0;
                    }
                }
                & .galerie {
                    display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1rem;flex-wrap:wrap;max-width:100%;width:100%;
                    & a {
                        display:block;flex:1 1 calc(100%/3 - 1rem);max-width:calc(100%/3 - 1rem);height:auto;aspect-ratio:1;object-fit:cover;object-position:center;position:relative;
                        & img {
                            & + .caption {
                                display:none;position:absolute;top:0;left:0;width:100%;height:100%;background:#1472f8c4;color:white;align-items:center;justify-content:center;font-size:.8rem;font-weight:500;padding:.5rem;text-align:center;border-radius:var(--border-radius);
                            }
                        }
                        &:hover {
                            & img {
                                & + .caption {
                                    display:flex;
                                }
                            }
                        }
                    }
                    & img {
                        flex:1 1 100%;max-width:100%;height:auto;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:var(--border-radius);
                    }
                }
            }
            &.lien-formation {
                background:none;   
            }
        }
    }
}

body.single-post {
    & main {
        & section {
            & article {
                & figure {
                    max-width:40rem;margin:2rem auto;display:block;
                    & img {
                        width:100%;height:auto;border-radius:var(--border-radius);
                    }
                }    
            }
        }
    }
}

body.iframe {
    & header {
        & .grid-padding-x {
            & > .large-8, & > .cell.text-association {
                display:none;
            }
        }
    }
    & footer {
        display:none;
    }
}

body.single-equipe {
    & main {
        & section {
            & img.logo {
                width:20rem;margin-inline:auto;display:block;margin-bottom:2rem;
            }
        }
    }
}

.fullwidth {
    width:100%;
}
footer {
    background:var(--dark-green);color:white;padding:2rem;border-radius:var(--border-radius);margin-bottom:2rem;margin-top:1rem;
    &.grid-container {
        padding-inline:3rem;
    }
    & img {
        &.logo {
            width:8rem;
        }
    }
    & a {
        color:white;
        &:hover, &:focus {
            color:var(--green);
        }
    }
    & p {
        text-align:right;
    }
    & nav {
        display:flex;justify-content:flex-end;align-items:center;height:100%;
        & ul {
            display:flex;justify-content:flex-end;align-items:center;list-style:none;margin:0;padding:0;color:white;font-size:80%;text-transform:uppercase;
            & li:not(:last-of-type) {
                &::after {
                    content:'|';margin-inline:.4rem;display:inline-block;
                }
                & a {
                    color:white;
                    &:hover, &:focus {
                        color:var(--green);
                    }
                }
            }
        }
    }
}

details {
    width:100%;max-width:40rem;position:relative;background: var(--green);color:white;text-align:left;padding:1rem;margin-bottom:.5rem;margin-inline:auto;;border-radius:var(--border-radius);cursor:pointer;
    & summary {
        list-style:none;padding-right:3rem;font-weight:bold;
        &::after {
            content:'\2b';position:absolute;top:.75rem;right:.5rem;background:var(--dark-green);color:white;border-radius:50%;font-size:1.5rem;transition:transform .75s ease-in-out;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-family:"Font Awesome 6 Free";font-weight:900;
        }
        &:hover {
            &::after {
                transform:rotate(360deg);
            }
        }
    }
    &[open] summary {
        margin-bottom:1rem;
        &::after {
            content:'\f068';
        }
    }
    &:last-of-type {
        margin-bottom:2rem;
    }
    & p, & ul, & ol {
        text-align:left;width:100%;
    }
}

.popup {display:none;}

.fancybox__container {
    --fancybox-bg:rgba(0, 0, 0, 0.7);
    & .fancybox__content {
        border-radius:var(--border-radius);padding:2rem;max-width:40rem;margin-inline:auto;background:white;text-align:center;
        & h3 {
            text-align:center;
        }
        & p, & ul, & ol {
            max-width:100%;width:100%;
        }
    }
    & .has-iframe, & .has-html5video {
        & .fancybox__content {
            max-width:80vw;
        }
    }
    & .has-inline {
        & iframe {
            width:100%;height:auto;border:none;aspect-ratio:16/9;display:block;margin:0 auto 2rem auto;border-radius:var(--border-radius);
        }
    }
}


.marker {
    display:flex;flex-direction:column;align-items:center;gap:.5rem;background:url('../img/icon-map.svg') no-repeat center center white;background-size:cover;border-radius:50%;padding:.5rem;width:2rem;aspect-ratio:1;cursor:pointer;border-radius:50%;
    &:hover, &.highlight {
        background-image:url('../img/icon-map-active.svg');z-index:2;
    }
}
.mapboxgl-popup {
    width:20rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;background:white;border-radius:calc(var(--border-radius)/2);padding:.5rem;padding-top:0;z-index:2;
    & .mapboxgl-popup-close-button {
        font-size:2rem;
    }
    & .mapboxgl-popup-content {
        display:flex;flex-direction:column;align-items:center;gap:.5rem;margin:0;width:100%;box-shadow:none;
        & img {
            width:5rem;margin:0 auto 1rem auto;
        }
        & h3 {
            color:var(--dark-green);font-size:1.1rem;margin-top:0;margin-bottom:.5rem;text-align:center;
        }
        & p {
            text-align:center;margin-bottom:.5rem;
            &:empty {
                display:none;
            }
        }
        & .buttons {
            & a.button {
                background:var(--dark-green);color:white;border-color:transparent;
                &:hover {
                    background:white;color:var(--txt-color);border-color:var(--dark-green);
                }
                &:focus {
                    background:var(--dark-green);color:white;border-color:transparent;outline:none;
                    &:hover {
                        background:white;color:var(--txt-color);border-color:var(--dark-green);
                    }
                }
            }
        }
    }
}
.swiper {
    padding-top:3rem;
    & .swiper-wrapper {
        display:grid;grid-auto-flow:column;
    }
    & .swiper-button-next, & .swiper-button-prev {
        width:var(--swiper-navigation-size);
        &::after {
            content:'\f105';font-family:'FontAwesome';font-size:1.4rem;color:var(--swiper-theme-color);background:white;border-radius:50%;padding:0;transition:var(--transition);aspect-ratio:1;width:var(--swiper-navigation-size);display:flex;text-align:center;align-items:center;justify-content:center;
        }
    }
    & .swiper-button-prev {
        &::after {
            content:'\f104';
        }
    }
}

/* Admin */
.language-switcher {display:none;}

.switch {
    display:flex;width:30rem;max-width:100%;height:auto;background:var(--green);border-radius:var(--border-radius);padding:0;position:relative;margin-inline:auto;cursor:pointer;
    & input {
        display:none;
        &:checked {
            & + .slider {
                left:50%;
            }
            & ~ .text:first-of-type {
                color:var(--text-color);
            }
            & ~ .text:last-of-type {
                color:white;
            }
        }
    }
    & .text {
        position:relative;color:var(--text-color);z-index:2;flex:0 0 50%;text-align:center;line-height:3;text-transform:uppercase;font-weight:500;
        &:first-of-type {
            color:white;
        }
    }
    & .slider {
        position:absolute;cursor:pointer;top:0;left:0;padding:0;margin:0;background:var(--dark-green);transition:.4s;border-radius:var(--border-radius);width:50%;height:100%;z-index:1;
    }
}

#loader {
    position:fixed;width:100%;height:100%;align-items:center;justify-content:center;top:0;left:0;display:none;background:rgba(255, 255, 255, .9);z-index:9999;
    & .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid var(--light-green);
        border-top: 5px solid var(--dark-green);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        display: inline-block;
    }
    & + section {
        margin-top:1rem;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animations */
section:not(#carte, :has(form), #activites, #formations, #carte-monde, #selection-pays, #pays-selectionne, #actualites, .simple-content) {
    opacity:0;transform:translateY(25%);
    &.in-view {animation:slideInFromBottom 1s ease-in-out forwards;}
}
footer {
    opacity:0;
    &.in-view {
        animation:opacityOnly 1s ease-in-out forwards;
    }
}
body.iframe section:not(#carte, :has(form), #activites, #formations, #carte-monde, #selection-pays, #pays-selectionne, #actualites, .simple-content) {
    opacity:1;transform:none;
    &.in-view {animation:none;opacity:1;transform:none;}
}
body.iframe {
    & footer, & #cmplz-manage-consent {
        display:none;
    }
}
@keyframes buttonPDFhover {
    0% {width:2rem;right:.5rem;}
    60% {width:2rem;right:calc(50% - 1rem);}
    100% {width:calc(100% - 1rem);right:.5rem;}
}
@keyframes buttonPlusHover {
    0% {width:2rem;right:.5rem;transform:rotate(0);}
    60% {width:2rem;right:calc(50% - 1rem);transform:rotate(-180deg);}
    100% {width:calc(100% - 1rem);right:.5rem;transform:rotate(-180deg);}
}
@keyframes slideInFromBottom {
    0% {opacity:0;transform:translateY(25%);}
    100% {opacity:1;transform:translateY(0);}
}
@keyframes opacityOnly {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes scaleUp {
    0% {transform:scale(0);}
    75% {transform:scale(1.2);}
    100% {transform:scale(1);}
}
@keyframes rotate {
    100% {transform:rotate(450deg);}
}
@keyframes swiperAnim {
    25% {right:0;opacity:0;}
    40% {right:calc(50%);opacity:1;}
    50% {right:calc(50% - 25px);}
    60% {right:calc(50% + 25px);}
    70% {right:calc(50% - 25px);opacity:1;}
    85% {right:calc(100% - 50px);opacity:0;}
}

#cmplz-document {
    margin-inline:auto;
    & h2 {
        text-align:center;
    }
    & details {
        & summary {
            &::after {
                display:none;
            }
        }
    }
}

/* FORM */
form[name="loginform"] {
    & input {
        background:white;border-radius:var(--border-radius);padding:.5rem;margin-bottom:1rem;width:100%;box-shadow:none;
        &[type="checkbox"] {
            width:auto;margin:0;
        }
        &[type="submit"] {
            background:var(--dark-green);color:white;border-color:transparent;margin-bottom:0;
            &:hover, &:focus {
                background:white;color:var(--txt-color);border-color:var(--dark-green);
            }
        }
    }
    & p.login-remember {
        & label {
            display:flex;align-items:center;justify-content:center;gap:.5rem;
        }
    }
}


/* RESPONSIVE */
@media screen and (max-width:78rem) {
    body.home {
        & header {
            & h1 {
                font-size:1.8rem;
                &::first-line {font-size:150%;}
                & + div {margin-left:0;width:100%;}
            }
        }
    }
}
@media screen and (max-width:69rem) {
    header {
        & div:has(nav) {
            & nav {
                & ul {
                    font-size:.8rem;
                    & li {
                        &:not(:last-of-type) {
                            &::after {
                                margin-inline:1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:64rem) {
    .social {
        & a {
            font-size:1.2rem;width:1.2rem;
        }
    }
    body.home {
        & header {
            &::before {
                bottom:6.6rem;
            }
            & h1 {
                font-size:1.7rem;line-height:1;
            }
        }
    }
    header {
        & .large-6:not(:has(img)) {
            padding-top:2rem;
        }
        & .grid-padding-x {
            & > .cell.text-association {
                & p {
                    font-size:.8rem;
                }
            }
        }
        & div:has(nav) {
            & nav {
                & ul {
                    font-size:.8rem;
                    & li {
                        &:not(:last-of-type) {
                            &::after {
                                margin-inline:1rem;
                            }
                        }
                    }
                }
            }
        }
        & + div.after-header {
            margin-top:-5rem;
            & .grid-x {
                & .bloc-mission {
                    padding:2rem 3rem;
                    & p {
                        font-size:.9rem;
                    }
                }
                & div:has(form) {
                    & form {
                        & label {
                            & select {
                                font-size:.8rem;
                            }
                            &::after {
                                top:0;
                            }
                        }
                    }
                }
            }
        }
    }
    main {
        & section {
            &#carte {
                & .cell:has(select) {
                    & > div {
                        &::after {
                            top:1.2rem;right:2.5rem;
                        }
                    }
                    & select {
                        font-size:.8rem;padding-inline:1.2rem;
                    }
                }
                & .cell:has(#list-container) {
                    display:none;
                }
                & .cell:has(.map-container) {
                    width: 100%;
                }
                
            }
        }
    }
    form {
        padding:5rem 2rem;
        & label {
            margin-bottom:.5rem;
            &[for="avatar"] {
                position:relative;top:0;left:0;width:100%;max-width:8rem;margin-top:-9rem;
            }
        }
        & .pratiques-grid {
            flex-direction:column;gap:0;margin:0;
        }
    }
    body.page-template-page-trouver-un-expert {
        & h1 {
            font-size:1.2rem;padding-left:2rem;
        }
    }
    body:not(.home) {
        & header {
            & h1 {
                font-size:1.2rem;padding-left:2rem;
            }
        }
    }
}
@media screen and (max-width:61rem) {
    header {
        & .large-6:not(:has(img)) {
            padding-top: 1rem;
        }
        & div:has(nav) {
            & nav {
                & ul {
                    & li {
                        &:not(:last-of-type) {
                            &::after {
                                margin-inline: .4rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:59rem) {
    header {
        & img {
            height:100%;object-fit:cover;object-position:bottom;
        }
        & div:has(nav) {
            & nav {
                padding-right:1rem;
                & ul {
                    flex-direction:column;align-items:flex-end;gap:.25rem;
                    & li {
                        &:not(:last-of-type) {
                            &::after {
                                display:none;
                            }
                        }
                        & ul {
                            right:-1rem;
                        }
                    }
                }
            }
        }
        & + div.after-header {
            margin-top:0;
            & .grid-x {
                & .bloc-mission {
                    padding:1rem;
                }
            }
        }
    }
    body.home {
        & header {
            &::before {
                bottom: 1.6rem;
            }
            &::after {
                display:none;
            }
        }
    }
    footer {
        & nav {
            & ul {
                & li:not(:last-of-type) {
                    &::after {
                        margin-inline: .4rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:40rem) {
    .grid-container {
        max-width:calc(100% - 2rem);
        & .grid-container {
            padding-inline:0;
        }
    }
    .social {
        flex-direction:row;justify-content:center;gap:.5rem;
    }
    body.home {
        & header {
            z-index:3;
            & h1 {
                font-size:1.8rem;
                &::first-line {font-size:150%;}
                & + div {margin-left:0;width:100%;}
            }
            & + div.after-header {
                margin-top: -1rem;
                & .grid-x {
                    & .bloc-mission {
                        width:100%;
                    }
                    & div:has(form) {
                        & form {
                            flex-direction:column;
                            & p {
                                margin-bottom:1rem;
                            }
                        }
                    }
                }
            }
        }
    }
    body:not(.home) {
        & header {
            background-size:cover;z-index:3;
            & h1 {
                padding-left:0;text-align:center;font-size:1.2rem;
            }
        }
        & section {
            padding:1rem 0;
        }
        &.single-formation {
            & main {
                & section {
                    &.infos {
                        &.grid-container:not(.full)>.grid-padding-x:has(.bloc-gauche, .bloc-droit) {
                            flex-direction:column;gap:2rem;padding-inline:1rem;
                            & .bloc-gauche, & .bloc-droit {
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
    }
    body.iframe {
        .grid-container {
            max-width: calc(100% - 1rem);
        }
    }
    body {
        &.menu-open {
            & header {
                & div:has(nav) {
                    & nav {
                        & ul {
                            & li:not(.wpml-ls-item) {
                                & a {
                                    font-size: 1rem;
                                }
                                &:has(.sub-menu) {
                                    & ul {
                                        & a {
                                            font-size:1rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
        &.home {
            & header {
                aspect-ratio:auto;
            }
            & main {
                & section {
                    &#header {
                        & .cell {
                            &:nth-child(2) {
                                padding-top:1rem;margin-top:0;clip-path:none;aspect-ratio:auto;
                            }
                        }
                    }
                }
            }
        }
        &.page-template-page-explorer-par-pays {
            & #search-bar {
                width:90%;left:5%;
            }
        }
        &.single-activite, &.tax-pays {
            & main {
                & section {
                    & p {
                        &.ctas {
                            & a {
                                flex: 1 1 100%;max-width: 100%;
                            }
                        }
                    }
                }
            }
        }
        & main {
            & section {
                &#header {
                    & .cell {
                        flex:0 0 100%;text-align:center;
                    }
                }
                &#liens {
                    gap:1rem;
                    & .cell {
                        flex: 0 0 100%;
                        & > div {
                            aspect-ratio:auto;
                        }
                        & span {
                            font-size:1.4rem;
                        }
                    }
                }
                &#chiffres {
                    margin-top:2rem;
                    & .large-5 {
                        &::before {
                            display:none;
                        }
                        & a.liens-membres {
                            width:80%;font-size:1rem;margin-inline:auto;display:block;height:auto;transform:translateY(-50%);
                        }
                    }
                    & .large-7 {
                        flex-wrap:nowrap;align-items:center;justify-content:flex-start;overflow-x:scroll;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x;scroll-snap-type:x mandatory;padding:1rem 0;
                        & .chiffre-item {
                            position:relative;flex:0 0 100%;scroll-snap-align:start;padding-inline:1rem;border:0;
                            &::before {
                                content:'';position:absolute;top:10%;left:10%;width:80%;height:80%;border-radius:50%;z-index:-1;border:2px solid white;
                            }
                        }
                    }
                }
                &#actualites {
                    & article {
                        & .actualite-content {
                            flex: 0 0 100%;
                        }
                    }
                }
            }
        }
    }
    header {
        & img {
            &.logo {
                height:auto;object-fit:contain;object-position:center;width:10rem!important;margin:.5rem auto;display:block;
            }
        }
        & .large-8:has(.logo) {
            padding-inline:0;
            & img {
                &.logo {
                    width:70%;margin-inline:auto;display:block;
                }
            }
        }
        & div:has(nav) {
            & nav {
                border-bottom-right-radius:0;border-bottom-left-radius:0;justify-content:center;padding-inline:0;margin-bottom:1rem;
                & ul {
                    align-items:center;justify-content:center;
                    & li {
                        font-size:.8rem;
                        & a {
                            &[href="#menu"] {
                                position:fixed;top:.5rem;right:.5rem;
                            }
                        }
                    }
                }
                & input[type="checkbox"] {
                    display:none;
                    & + label {
                        display:flex;
                        & ~ ul {
                            position:fixed;top:-100vh;right:0;background:var(--dark-green);flex-direction:column;gap:1rem;padding:2rem;z-index:10;width:100vw;height:100vh;overflow:auto;align-items:center;justify-content:center;transition:var(--transition);
                            & li {
                                width:100%;text-align:center;align-items:center;justify-content:center;
                                & a {
                                    background:white;padding-inline:2rem;line-height:4;display:block;border-radius:var(--border-radius);width:100%;position:relative;z-index:1;
                                }
                                & ul {
                                    display:flex;flex-direction:column;gap:.5rem;background:none;text-align:center;width:100%;align-items:center;right:0;top:-2rem;position:relative;background:linear-gradient(to top, #d177b4, var(--dark-green));z-index:0;padding-top:3rem;
                                    &::before {
                                        display:none;
                                    }
                                }
                            }
                        }
                    }
                    &:checked + label {
                        &::before {
                            content:'\f00d';
                        }
                        & ~ ul {
                            top:0;
                            &::before {
                                content:url('../img/logo-frogh-white.svg');position:relative;width:50%;height:auto;margin-bottom:1rem;
                            }
                        }
                    }
                }
            }
        }
        & .grid-padding-x {
            & > .cell.text-association {
                right:0;padding-top:0;flex-direction:column;
                & p {
                    font-size:.9rem;text-align:center;max-width:90%;
                }
                &::before {
                    display:none;
                }
            }
        }
        & + div.after-header {
            & .grid-x {
                & .bloc-mission {
                    &::before {
                        top: -1.6rem;
                    }
                }
            }
        }
    }
    main {
        & section {
            &#carte {
                & h1 {
                    padding-left:0;text-align:center;
                }
                & .cell:has(select) {
                    &::after {
                        display:none;
                    }
                }
                & .map-container, & #list-container {
                    border-top-left-radius:0;border-top-right-radius:0;
                }
                & .cell:has(#list-container) {
                    display:none;
                }
            }
            &:has(.dropdown-checkboxes) {
                & .cell:has(.dropdown-checkboxes) {
                    flex-direction:column;
                    & input[type="checkbox"]:checked ~ .dropdown-menu {
                        position:relative;top:0;
                    }
                }
            }
        }
    }
    footer {
        & img {
            &.logo {
                margin:0 auto 2rem auto;display:block;
            }
        }
        & .coordonnees {
            flex-direction:column;gap:1rem;
        }
        & p {
            text-align: center;
        }
        & nav {
            justify-content:center;
            & ul {
                flex-direction:column;
                & li:not(:last-of-type) {
                    &::after {
                        display:none;
                    }
                }
            }
        }
    }
    form {
        padding:1rem;max-width:100%;
        & label {
            &[for="avatar"] {
                margin-top:-4rem;
            }
        }
        & .flex {
            flex:0 0 100%;max-width:100%;
        }
    }
    body.page-template-page-explorer-par-themes, body.page-template-page-nos-activites, body.page-template-default, body.page-template-page-reseau-frogh, body.page-template-page-actualites, body.page-template-page-nos-formations, body.page-template-page-explorer-par-institution {
        & main {
            & section {
                & .activites-groupe {
                    & article {
                        flex: 0 0 100%;
                    }
                }
            }
        }
    }
    .fancybox__container {
        & .fancybox__content {
            padding: 1rem;
        }
    }
    body {
        &.page-template-page-publications-ressources {
            & main {
                & section {
                    & ul {
                        & li {
                            flex:0 0 100%;max-width:100%;
                        }
                    }
                }
            }
        }
    }
}

.grecaptcha-badge {
    display:none!important;
}

.fancybox__content>.f-button.is-close-btn {
    opacity:1;
}
.is-compact .fancybox__content>.f-button.is-close-btn {
    top:1rem;right:1rem;
    --f-button-bg:var(--dark-green);
    --f-button-active-bg:var(--dark-green);
    --f-button-hover-bg:var(--dark-green);
    --f-button-outline-color:var(--dark-green);
}

.fancybox__content>.f-button.is-close-btn {
    --f-button-width:2.5rem;--f-button-height:2.5rem;top:-1.5rem;right:-2rem;border:2px solid white;border-radius:50%;padding:.5rem;
    &:hover {
        animation:rotate .5s ease-in-out;
    }
}
.f-button svg {
    fill:white;
    & path {
        fill:white;opacity:1;stroke-width:4px;
    }
}