@import url('form.css');

/* Fonts */
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Light.woff2') format('woff2');
    font-weight:lighter;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Light_Italic.woff2') format('woff2');
    font-weight:lighter;
    font-style:italic;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Medium.woff2') format('woff2');
    font-weight:normal;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Medium_Italic.woff2') format('woff2');
    font-weight:normal;
    font-style:italic;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Bold.woff2') format('woff2');
    font-weight:bold;
    font-style:normal;
}
@font-face {
    font-family:'NeulisNeue';
    src: url('../fonts/Neulis_Neue_Bold_Italic.woff2') format('woff2');
    font-weight:bold;
    font-style:italic;
}
@font-face {font-family:'SocialMediaCircled';src:url('../fonts/Social-Media-Circled.woff') format('woff');font-style:normal;font-weight:normal;}

/* Variables */
:root {
    --pink:#e876b4;
    --light-blue:#f1f7fd;
    --medium-blue:#dbeafa;
    --blue:#0088f9;
    --light-grey:#dddbda;
    --txt-color:#202933;
    --border-radius:2rem;
    --transition:all 0.25s ease-in-out;
    --swiper-theme-color:var(--blue);
    --swiper-navigation-size:2rem;
    --swiper-pagination-bullet-width:.8rem;
    --swiper-pagination-bullet-height:var(--swiper-pagination-bullet-width);
    --swiper-pagination-bottom:calc(100% - var(--swiper-pagination-bullet-width)*2);
}

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

a {
    color:var(--txt-color);text-decoration:none;
    &:hover, &:focus {
        color:var(--blue);text-decoration:none;
    }
    &.button {
        display:block;padding:0.5rem 1rem;background:var(--blue);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(--blue);
        }
        &.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(--blue);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(--blue);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:'NeulisNeue';font-weight:bold;color:var(--blue);line-height:1.1;width:100%;
}
h1 {
    font-size:1.8rem;
    &::first-line {font-size:250%;}
    & + div {margin-left:4rem;width:100%;}
}
h2 {
    font-size:1.4rem;
}
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:linear-gradient(to right, #d177b4, #76abdb, #e1d9f8, #deeaf8);border-radius:var(--border-radius);padding:1rem 1rem 0 1rem;margin-top:2rem;
    & img {
        pointer-events:none;
        &.logo {
            width:8rem;
        }
    }
    & div:has(nav) {
        display:flex;
        & nav {
            display:flex;justify-content:space-between;align-items:center;background:white;border-radius:calc(var(--border-radius)/1.2);padding:1rem 2rem;width:100%;
            & input[type="checkbox"] {
                display:none;
                & + label {
                    position:fixed;top:.5rem;right:0;display:none;flex-direction:column;z-index:11;border-radius:50%;padding:0;background:white;width:3rem;aspect-ratio:1;align-items:center;justify-content:center;border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0;
                    &::before {
                        content:'\f0c9';font-family:'FontAwesome';font-size:1.5rem;color:var(--txt-color);
                    }
                }
            }
            & ul {
                display:flex;justify-content:space-between;align-items:center;list-style:none;margin:0;padding:0;color:var(--txt-color);font-weight:bold;
                & li {
                    position:relative;text-transform:uppercase;
                    & label[for="espacepro"] {
                        font-size:.9rem;line-height:1.2;color:var(--txt-color);font-weight:bold;
                    }
                    &:not(:last-of-type) {
                        &::after {
                            content:'|';margin-inline:2rem;display:inline-block;
                        }
                    }
                    & ul {
                        display:none;position:absolute;top:100%;right:-2rem;min-width:100%;width:fit-content;white-space:nowrap;background:white;border-radius:var(--border-radius);padding:2rem;z-index:1;flex-direction:column;gap:.5rem;align-items:flex-start;justify-content:flex-start;padding-inline:2rem;border-top-right-radius:0;border-top-left-radius:0;
                        & li {
                            display:flex;text-transform:none;
                            &:not(:last-of-type) {
                                margin-bottom:.5rem;
                            }
                            &::after {
                                display:none!important;
                            }
                            &.logout {
                                margin-top:2rem;
                            }
                        }
                        &::before {
                            content:'';position:absolute;top:1.5rem;left:-3rem;width:3rem;height:3rem;background:url('../img/angle-rounded.svg') no-repeat bottom left;background-size:contain;transform:scale(-1);
                        }
                    }
                    &:hover {
                        & ul {
                            display:flex;
                        }
                    }
                }
            }
        }
    }
    & .grid-padding-x {
        width:100%;margin-inline:0!important;
        & .grid-padding-x {
            margin-inline:0;padding-inline:1rem;
        }
        & > .cell.text-association {
            margin:0;text-align:right;padding:1rem .5rem 1rem 0;position:relative;right:-1.1rem;text-transform:uppercase;display:flex;align-items:center;justify-content:flex-end;gap:.5rem;background:white;border-bottom-left-radius:var(--border-radius);
            & span {
                position:absolute;top:-1rem;left:0;width:100%;height:1rem;background:white;
            }
            &::before {
                content:'';position:absolute;top:-1rem;left:-3rem;width:3rem;height:3rem;background:url('../img/angle-rounded.svg') no-repeat center center;background-size:cover;transform:scale(-1);
            }
            &::after {
                content:'';position:absolute;bottom:-3rem;right:0;width:3rem;height:3rem;background:url('../img/angle-rounded.svg') no-repeat center center;background-size:cover;transform:scale(-1);z-index:5;
            }
            & p {
                position:relative;color:var(--blue);z-index:1;font-size:1.1rem;margin:0;
            }
        }
        & + .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-4:has(a.button) {
        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(--blue);color:white;border-color:transparent;margin-bottom:0;
                &:hover {
                    background:white;color:var(--txt-color);border-color:var(--blue);
                }
            }
            &::after, &::before {
                content:'';position:absolute;bottom:0;left:-3rem;width:3rem;height:3rem;background:url('../img/angle-rounded.svg') no-repeat center center;background-size:cover;transform:scaleX(-1);
            }
            &::before {
                left:auto;right:-3rem;transform:scaleX(1);
            }
        }
    }
    & 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(--blue);color:white;border-color:transparent;
        }
    }
    & + div.after-header {
        margin-top:-8rem;
        & .grid-x {
            display:flex;flex-direction:row;align-items:flex-end;gap:1.6rem;
            & .bloc-mission {
                position:relative;z-index:1;background:url('../img/bg-mission.jpg') no-repeat bottom right;background-size:cover;padding:2rem 3rem 7rem 3rem;border-radius:var(--border-radius);display:flex;flex-direction:column;justify-content:center;outline:1.6rem solid white;width:calc(100%/3 - 1.6rem);
                & h2, & p {
                    color:white;
                }
                & p {
                    font-size:1.2rem;width:100%;
                }
                &::before {
                    content: '';
                    background: white;
                    width: 3rem;
                    height: 1rem;
                    position: absolute;
                    top: -1.65rem;
                    left: -.8rem;
                    z-index: 0;
                }
            }
            & div:has(form) {
                padding:0;
                & form {
                    background:#deeaf8;display:flex;justify-content:space-between;align-items:center;border-radius:var(--border-radius);padding:1.4rem 1rem;
                    & p {color:var(--blue);font-weight:bold;font-size:1.1rem;margin-bottom:0;}
                    & label {
                        position:relative;display:flex;flex-direction:row;gap:.5rem;align-items:center;
                        & input {
                            background:#deeaf8;border:1px solid white;border-radius:var(--border-radius);padding:.5rem;margin:0;box-shadow:none;padding-right:4rem;width:30rem;
                            &::placeholder {color:#deeaf8;}
                        }
                        & span {
                         position:absolute;left:.5rem;font-size:1rem;color:var(--txt-color);
                        }
                        & select {
                            margin-bottom:0;border-radius:2rem;border:2px solid var(--blue);background:white;width:100%;line-height:3;height:auto;text-transform:uppercase;padding-inline:2rem 4rem;
                        }
                        &::after {
                            content:'\f0da';font-family:'FontAwesome';position:absolute;top:.25rem;right:1rem;color:var(--txt-color);font-size:1.5rem;transition:var(--transition);
                        }
                    }
                    & input[type="submit"] {
                        position:relative;margin-left:-4.3rem;
                        appearance:none;background:url('../img/icon-search.svg') no-repeat center center white;background-size:40%;color:var(--blue);border:1px solid transparent;border-radius:var(--border-radius);padding:1rem 2rem;cursor:pointer;font-size:0;width:3rem;height:2rem;
                        &:hover, &:focus {
                            background-image:url('../img/icon-search-white.svg');background-color:var(--blue);color:white;
                        }
                    }
                    & a.button {
                        margin-bottom:0;text-transform:uppercase;padding-inline:2rem;background:white;color:var(--txt-color);
                        &:hover, &:focus {
                            background:var(--blue);color:white;
                        }
                    }
                }
            }
        }
    }
}

body.home {
    & header {
        &::before {
            content:'';position:absolute;bottom:9.6rem;left:0;width:4rem;height:4rem;background:url('../img/angle-rounded.svg') no-repeat bottom left;background-size:contain;
        }
        &::after {
            content:'';position:absolute;bottom:0;left:calc(100%/3);width:4rem;height:4rem;background:url('../img/angle-rounded.svg') no-repeat bottom left;background-size:contain;
        }
        & .grid-padding-x {
            & + .grid-padding-x {
                margin-top:0;
            }
        }
    }
}

main {
    display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-evenly;margin:2rem 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%;
        & .large-12 {
            & h2 {
                margin-bottom:2rem;
            }
            & h2, & p {
                text-align:center;
            }
        }
        &#parcours {
            background:var(--light-blue);
            & ol {
                display:flex;flex-direction:row;gap:2rem;justify-content:center;align-items:flex-start;list-style:none;margin:0;padding:0;counter-reset:item;flex-wrap:wrap;
                & li {
                    display:flex;flex-direction:column;align-items:center;gap:1rem;counter-increment:item;width:calc(100%/4 - 2rem);padding:2rem;text-align:center;font-size:.8rem;position:relative;opacity:0;
                    &::before {
                        content:counter(item, decimal-leading-zero);background:var(--blue);color:white;border-radius:50%;padding:.5rem;font-size:1.5rem;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;position:absolute;top:5.5rem;left:calc(50% - 6.5rem);
                    }
                    & img {
                        width:10rem;border-radius:50%;aspect-ratio:1;object-fit:cover;object-position:center;border:2px solid var(--blue);
                    }
                    & h3 {
                        color:var(--blue);
                    }
                }
            }
            &.in-view ol li {
                animation:opacityOnly 2s forwards;animation-delay:var(--delay);
                &::before {
                    transform:scale(0);animation:scaleUp 1s forwards;animation-delay:var(--delay);
                }
            }
        }
        &#professionnels {
            background:var(--light-grey);padding:0;gap:2rem;max-width:calc(66.6666666667% - 2rem);overflow:hidden;
            & .large-12 {
                display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:0;
                & img {
                    max-width:40%;margin-left:-2rem;
                }
                & div {
                    position:relative;margin-left:-2rem;
                    & h2, & p {
                        text-align:left;
                    }
                }
            }
        }
        &#attention {
            background:var(--medium-blue);padding:0;gap:2rem;max-width:calc(33.3333333333% - 2rem);
            & .large-12 {
                display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
                & a.button + a.button {
                    background:white;border-color:white;color:var(--txt-color);
                    &:hover, &:focus {
                        border-color:var(--blue);color:var(--blue);
                    }
                }
            }
        }
        &#lentilles {
            background:linear-gradient(to left, #d177b4, #e1d9f8, #deeaf8);overflow:hidden;
            & img {
                position:absolute;top:0;left:0;width:50%;height:100%;z-index:0;object-fit:cover;object-position:center;
            }
            & p {
                max-width:fit-content;margin-left:0;
            }
            & a.button {
                max-width:none;
                &:first-of-type {
                    margin-top:2rem;
                }
            }
            & .popup {
                display:none;
            }
        }
        &#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:#e0e9f8;
            & .cell:has(select) {
                position:relative;
                & > div {
                    background:#f7f9fd;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);padding:1rem;
                    &::after {
                        content:'\f0da';font-family:'FontAwesome';position:absolute;top:1.5rem;right:3.5rem;color:var(--txt-color);font-size:1.5rem;transition:var(--transition);
                    }
                }
                & select {
                    margin-bottom:0;border-radius:2rem;border:2px solid var(--blue);background:white;width:100%;line-height:3;height:auto;text-transform:uppercase;padding-inline:2rem;
                }
                &::after {
                    content:'';position:absolute;bottom:0;left:-2rem;width:3rem;height:3rem;background:url('../img/angle-rounded-f7f9fd.svg') no-repeat center center;background-size:cover;transform:scaleX(-1);
                }
            }
            & .map-container, & #list-container {
                width:100%;height:50rem;border-radius:var(--border-radius);padding:1rem;background:#f7f9fd;border-top-right-radius:0;
                & #map {
                    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:rgba(255, 255, 255, 0.71);
                & 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:white;margin-bottom:.5rem;
                    & img {
                        width:5rem;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:50%;margin:0 1rem 1rem 0;
                        & + div {
                            flex:0 0 calc(100% - 7rem);
                        }
                    }
                    & h3 {
                        color:var(--txt-color);font-size:1.1rem;margin-bottom:0;
                    }
                    & .adresse {
                        background:#dee9fa;border-radius:calc(var(--border-radius)/2);padding:.5rem 1rem;max-width:100%;width:100%;text-align:center;font-style:italic;
                    }
                    & .buttons {
                        display:flex;flex-direction:row;gap:.5rem;align-items:center;justify-content:flex-start;width:100%;
                        & .button {
                            background:#0a0049;
                        }
                    }
                    &.highlight, &:hover {
                        background:var(--blue);color:white;
                        & h3, & p {
                            color:white;
                        }
                        & a.button {
                            &:hover, &:focus {
                                background:white;color:#0a0049;border-color:#0a0049;
                            }
                        }
                        & .adresse {
                            color:var(--txt-color);
                        }
                    }
                }
            }
        }
        &.chiffres {
            &:not(:has(h2)) {
                padding-top:0;
            }
            & .swiper {
                padding-top:0;
                & .swiper-slide {
                    display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border-radius:50%;border:2px solid var(--blue);box-sizing:border-box;transition:border 0.25s ease-in-out;text-align:center;
                    & span {
                        display:block;font-size:2.4rem;font-weight:bold;color:var(--blue);
                    }
                    &:hover {
                        border-width:.5rem;
                    }
                }
            }
        }
        &.note-importante {
            border:2px solid var(--pink);background:#f7e7f7;padding:1rem;border-radius:var(--border-radius);
            & h2 {
                color:var(--pink);
            }
            & .colonnes {
                display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem;
                & > div {
                    flex:0 0 calc(100%/2 - 1rem);
                    & p, & ul, & ol {
                        text-align:left;width:100%;
                    }
                }
            }
        }
        &#actualites, &#documents, &#etudes-de-cas, &#formations {
            & h2 {
                font-size:1.8rem;margin-bottom:0;
                & + p {
                    margin-top:1rem;font-style:italic;
                }
            }
            & .swiper-wrapper {
                height:fit-content;align-items:flex-start;justify-content:flex-start;
            }
            & .rubriques {
                display:flex;align-items:center;justify-content:center;width:100%;gap:1rem;margin-bottom:2rem;
                & a.button {
                    margin:0;
                    &.hidden {
                        background:var(--blue);color:white;border-color:transparent;
                        & ~ a.button:not(.hidden) {
                            background:white;color:var(--txt-color);border-color:var(--blue);
                        }
                    }
                }
            }
            & article {
                background:#eee;border-radius:var(--border-radius);padding:2rem;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
                &.hidden {
                    display:none;
                }
                & img, & video {
                    border-radius:var(--border-radius);margin-bottom:1rem;aspect-ratio:16/9;object-fit:cover;object-position:center;width:100%;
                    &.icon {
                        object-fit:contain;background:white;
                    }
                }
                & h3 {
                    text-align:center;font-size:1.2rem;
                }
                & .popup {
                    display:none;
                }
            }
        }
        &#lentilles {
            & h2 {
                & span {
                    font-size:80%;
                }
            }
        }
    }
}

body.page-template-page-espace-membre {
    & header {
        margin-bottom:0;
        & .cell:has(a.button[href*="/profil-membre/"]) {
            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(--blue);color:white;border-color:transparent;margin-bottom:0;
                    &:hover {
                        background:white;color:var(--txt-color);border-color:var(--blue);
                    }
                }
                &::after, &::before {
                    content:'';position:absolute;bottom:0;left:-3rem;width:3rem;height:3rem;background:url('../img/angle-rounded.svg') no-repeat center center;background-size:cover;transform:scaleX(-1);
                }
                &::before {
                    left:auto;right:-3rem;transform:scaleX(1);
                }
            }
        }
    }
}

body:not(.home) {
    & header {
        & h1 {
            font-size:1.4rem;padding-left:3rem;margin-bottom:2rem;
            &::first-line {
                text-transform:uppercase;font-size:150%;
            }
        }
    }
}

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

body.page-template-page-trouver-un-expert {
    & h1 {
        font-size:1.4rem;padding-left:3rem;
        &::first-line {
            text-transform:uppercase;font-size:150%;
        }
    }
    & header {
        background:#e0e9f8;border-bottom-right-radius:0;border-bottom-left-radius:0;
        & .grid-padding-x {
            & .grid-padding-x {
                display:none;
            }
        }
    }
    & main {
        margin-top:0;
        & section {
            border-top-right-radius:0;border-top-left-radius:0;
        }
    }
}
.fullwidth {
    width:100%;
}
footer {
    background:var(--blue);color:white;padding:2rem;border-top-left-radius:var(--border-radius);border-top-right-radius:var(--border-radius);
    & img {
        &.logo {
            width:8rem;
        }
    }
    & a {
        color:white;
        &:hover, &:focus {
            color:var(--txt-color);
        }
    }
    & p {
        text-align:right;
    }
    & nav {
        display:flex;justify-content:center;align-items:center;
        & ul {
            display:flex;justify-content:center;align-items:center;list-style:none;margin:0;padding:0;color:var(--txt-color);font-size:80%;text-transform:uppercase;
            & li:not(:last-of-type) {
                &::after {
                    content:'|';margin-inline:1.4rem;display:inline-block;
                }
                & a {
                    color:var(--txt-color);
                    &:hover, &:focus {
                        color:white;
                    }
                }
            }
        }
    }
    & .coordonnees {
        display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:1rem;
        & .social {
            & a {
                color:white;background:var(--blue);
                &:hover {
                    background:white;color:var(--txt-color);
                }
            }
        }
    }
}

details {
    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);cursor:pointer;
    & summary {
        list-style:none;padding-right:3rem;
        &::after {
            content:'+';position:absolute;top:.75rem;right:.5rem;background:var(--blue);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;
        }
        &:hover {
            &::after {
                transform:rotate(360deg);
            }
        }
    }
    &[open] summary {
        margin-bottom:1rem;
        &::after {
            content:'-';
        }
    }
    &: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;
        & 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 {
            border-radius:50%;width:5rem;aspect-ratio:1;object-fit:cover;object-position:center;margin:0 auto 1rem auto;
        }
        & h3 {
            color:var(--blue);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(--blue);color:white;border-color:transparent;
                &:hover {
                    background:white;color:var(--txt-color);border-color:var(--blue);
                }
                &:focus {
                    background:var(--blue);color:white;border-color:transparent;outline:none;
                    &:hover {
                        background:white;color:var(--txt-color);border-color:var(--blue);
                    }
                }
            }
        }
    }
}
.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;}

/* Animations */
section:not(#carte, :has(form)) {
    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;
    }
}
@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:#f7f9fd;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(--blue);color:white;border-color:transparent;margin-bottom:0;
            &:hover, &:focus {
                background:white;color:var(--txt-color);border-color:var(--blue);
            }
        }
    }
    & 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%;}
            }
        }
    }
    main {
        & section {
            &#actualites, &#documents, &#etudes-de-cas, &#formations {
                & .rubriques {
                    overflow-x:auto!important;scrollbar-width:none;scroll-snap-type:x mandatory;justify-content:flex-start;white-space:nowrap;
                }
            }
        }
    }
}
@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 {
            &.chiffres {
                & .swiper {
                    & .swiper-slide {
                        font-size:.8rem;
                        & span {
                            font-size:2rem;
                        }
                    }
                }
            }
            &#professionnels {
                & .large-12 {
                    & img {
                        height:100%;object-fit:cover;object-position:left;
                    }
                    & div {
                        & h2 {
                            margin-top:1rem;margin-bottom:1rem;
                        }
                    }
                }
            }
            &#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:not(.find-an-expert, [name="loginform"]) {
        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;
            }
        }
    }
    body.page-template-page-trouver-un-expert {
        & h1 {
            font-size: 1rem;
            padding-left: 2rem;
        }
    }
    main {
        & section {
            &#parcours {
                & ol {
                    overflow-x:auto!important;scrollbar-width:none;scroll-snap-type:x mandatory;justify-content:flex-start;flex-wrap:nowrap;scroll-snap-align:start;
                    & li {
                        width: calc(100% / 2 - 2rem);
                        flex: 0 0 calc(100% / 2 - 2rem);
                    }
                    &::after {
                        content:'\f25a';display:block;position:fixed;margin-top:1rem;right:calc(50% - 10px);bottom:6rem;color:var(--blue);font-family:'FontAwesome';font-size:1.5rem;opacity:0;animation:swiperAnim 4s infinite;
                    }
                }
            }
            &#professionnels {
                max-width:100%;padding:2rem 1rem;
                & .large-12 {
                    flex-direction:column;
                    & div {
                        margin-left:0;
                    }
                    & img {
                        margin-left:auto;max-width:100%;margin-bottom:2rem;border-radius:var(--border-radius);height:auto;
                    }
                }
            }
            &#attention {
                max-width:100%;padding:2rem 1rem;
            }
            &#actualites, &#documents, &#etudes-de-cas, &#formations {
                & article {
                    & h3 {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
    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 {
            background: linear-gradient(to top, #d177b4, #76abdb, #e1d9f8, #deeaf8);
            &::before {
                bottom:2.6rem;
            }
            &::after {
                display:none;
            }
            & 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 {
            & h1 {
                padding-left:0;text-align:center;font-size:1.2rem;
            }
        }
        & section {
            padding:1rem 0;
        }
    }
    header {
        & img {
            height:auto;object-fit:contain;object-position:center;
        }
        & .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;
                & input[type="checkbox"] {
                    display:none;
                    & + label {
                        display:flex;
                        & ~ ul {
                            position:fixed;top:-100vh;right:0;background:var(--blue);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;
                                }
                                & label[for="espacepro"] {
                                    border-radius:var(--border-radius);padding-inline:2rem;line-height:4;cursor:pointer;color:var(--txt-color);background:white;z-index:1;position:relative;font-weight:600;font-size:.8rem;
                                    &::after {
                                        content:'\f0d7';position:absolute;bottom:-1.6rem;left:0;width:100%;height:100%;color:white;z-index:2;font-family:'FontAwesome';font-size:1.5rem;display:flex;align-items:center;justify-content:center;
                                    }
                                }
                                & 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(--blue));z-index:0;padding-top:3rem;
                                    &::before {
                                        display:none;
                                    }
                                }
                                & input[name="espacepro"] {
                                    & + ul {
                                        max-height:0;transition:var(--transition);overflow:hidden;padding-top:0;padding-bottom:0;
                                    }
                                    &:checked + ul {
                                        max-height:100vh;padding-top:3rem;padding-bottom:2rem;
                                    }
                                }
                            }
                        }
                    }
                    &:checked + label {
                        &::before {
                            content:'\f00d';
                        }
                        & ~ ul {
                            top:0;
                            &::before {
                                content:url('../img/logo-afelc-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 {
            &#parcours {
                & ol {
                    position:relative;margin-bottom:2rem;
                    & li {
                        width:100%;padding-top:0;padding-bottom:0;flex:0 0 100%;max-width:100%;scroll-snap-align:start;
                    }
                }
            }
            &#lentilles {
                background: linear-gradient(to top, #d177b4, #e1d9f8, #deeaf8);
                & img {
                    position:relative;width:100%;height:auto;top:-2rem;
                }
            }
            &#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;
                }
            }
        }
    }
    footer {
        & img {
            &.logo {
                margin:0 auto 2rem auto;display:block;
            }
        }
        & .coordonnees {
            flex-direction:column;gap:1rem;
        }
        & p {
            text-align: center;
        }
        & nav {
            & ul {
                flex-direction:column;
                & li:not(:last-of-type) {
                    &::after {
                        display:none;
                    }
                }
            }
        }
    }
    form:not(.find-an-expert, [name="loginform"]) {
        padding:1rem;max-width:100%;
        & label {
            &[for="avatar"] {
                margin-top:-4rem;
            }
        }
        & .flex {
            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(--blue);
    --f-button-active-bg:var(--blue);
    --f-button-hover-bg:var(--blue);
    --f-button-outline-color:var(--blue);
}