@import url('form.css');

@font-face {
    font-family:'Ford Antenna';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/ford-antenna-medium-58955836e60d2.woff') format('woff');
}
@font-face {
    font-family:'SocialMediaCircled';
    font-style:normal;
    font-weight:normal;
    src:url('../fonts/Social-Media-Circled.woff2') format('woff2');
}

:root {
    --text-gold:linear-gradient(to right, #f4e29b, #ca9921, #fff9d1, #c8951a);
    --grey-light:#9a9a9a;
    --grey-medium:#575756;
    --grey-dark:#3b3b3b;
    --border-radius:5rem;
    --transition:all .25s ease-in-out;
    --swiper-theme-color:var(--text-gold);
    --swiper-pagination-bullet-inactive-color:var(--grey-medium);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-border-radius: 1rem;
    --swiper-navigation-size:2rem;
    --swiper-navigation-color:var(--dark-green);
    --swiper-navigation-color-hover:var(--light-green);
    --swiper-navigation-color-disabled:var(--grey);
    --swiper-navigation-color-disabled-hover:var(--grey);
    --swiper-pagination-bottom:0;
    --swiper-pagination-bullet-width:.5rem;
    --swiper-pagination-bullet-height:.5rem;
}
body {background:white;}

h1, h2, h3, h4, h5, h6, p, li {text-align:center;text-transform:uppercase;font-family:'Ford Antenna';font-weight:normal;max-width:50rem;margin-inline:auto;line-height:1.2;}
h1 {font-size:1.4rem;}
h2 {font-size:1.2rem;}
h3 {font-size:1rem;}
p, li {font-size:.8rem;text-transform:none;}
a {
    color:white;text-decoration:underline;
    &:hover {text-decoration:none;}
}

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

.button, a.button {background:white;border-radius:2rem;border:0;color:var(--grey-dark);text-transform:uppercase;font-weight:normal;line-height:2;font-size:.8rem;margin:0;padding:0 2rem;height:fit-content;width:fit-content;text-decoration:none;}
.button:hover, .button:focus, a.button:hover, a.button:focus {background:var(--text-gold);color:var(--grey-dark);}
.text-gold {background:var(--text-gold);background-clip:text;color:transparent;width:fit-content;}

header {
    position:relative;background:var(--grey-dark);color:var(--grey-light);border-bottom-right-radius:var(--border-radius);overflow:hidden;margin-top:3rem;padding:0 4rem 4rem 4rem;
    &::before {content:'';background:url('../img/bg-pattern.jpg') no-repeat top center;position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:darken;opacity:.35;}
    &::after {content:'';background:linear-gradient(to top, var(--grey-dark), transparent);position:absolute;bottom:0;left:0;width:100%;height:50%;}
    & * {z-index:1;}
    & nav {
        display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin:2rem 0 3rem 0;
        & a:not(.button) {color:white;text-decoration:none;}
    }
    & h1 {
        margin-bottom:6rem;
        & span {color:var(--grey-light);text-transform:none;font-size:1rem;font-weight:normal;display:block;}
    }
    & img {margin-inline:auto;max-width:30rem;display:block;margin:0 auto 3rem auto;}
    & h2, & p {text-align:center;}
}

main {
    position:relative;z-index:1;
    & section {
        & .cell:not(.no-padding) {padding-top:2rem;padding-bottom:2rem;}
        & h2 {
            margin-bottom:2rem;
            & img {margin-inline:auto;max-width:4.5rem;display:block;margin:0 auto .5rem auto;}
        }
        & ul {
            list-style-type:none;margin:0;text-align:center;
            & li {display:block;margin-bottom:1rem;}
        }
        & .chiffres {
            display:flex;justify-content:center;gap:2rem;margin:0;
            & .swiper-wrapper {
                margin-bottom:2rem;
                & .swiper-slide {
                    aspect-ratio:1;background:var(--grey-dark);display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;padding:1rem;width:8rem;text-transform:uppercase;box-sizing:border-box;
                    & span {
                        background:var(--text-gold);background-clip:text;color:transparent;
                        &:first-of-type {font-size:1.5rem;}
                    }
                }
            }
            &.align-center {
                & .swiper-wrapper {justify-content:space-around;}
            }
        }
        &#equipe {
            position:relative;background:var(--grey-dark);color:var(--grey-light);border-top-left-radius:var(--border-radius);overflow:hidden;margin-top:3rem;padding:4rem;
            &::before {content:'';background:url('../img/bg-pattern.jpg') no-repeat top center;position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:darken;opacity:.35;}
            &::after {content:'';background:linear-gradient(to top, var(--grey-dark), transparent);position:absolute;bottom:0;left:0;width:100%;height:50%;}
            & * {z-index:1;}
            & .trombinoscope {
                & h3 {text-transform:none;color:white;margin:0;font-size:.8rem;}
                & p {font-size:.8rem;}
                & img {border-radius:50%;max-width:70%;margin-inline:auto;display:block;margin-bottom:1rem;transform:scale(0);}
            }
            &.in-view {
                & .trombinoscope {
                    & > div {
                        --delay:attr(data-delay);
                        & img {animation:scaleUp 2s ease-in-out forwards;animation-delay:var(--delay);}
                    }
                }
            }
        }
        & #contact {
            & h3 {
                text-transform:none;font-size:1.4rem;color:white;margin-bottom:0;
                & + p {margin-top:-.5rem;}
            }
        }
        &#map {
            background:url('../img/map.jpg') no-repeat center center;background-size:cover;aspect-ratio:2500/778;position:relative;
            & > div {
                position:absolute;bottom:3rem;right:3rem;width:30rem;height:calc(100% - 6rem);background:var(--grey-dark);color:white;padding:2rem 4rem;border-top-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);display:flex;flex-direction:column;justify-content:center;gap:1rem;
                & p[itemprop], & a[itemprop] {display:flex;align-items:center;gap:1rem;}
                & p[itemprop]::before, & a[itemprop]::before {content:'';background-repeat:no-repeat;background-position:center center;background-size:contain;aspect-ratio:1;width:2rem;display:block;}
                & p {
                    text-align:left;width:100%;max-width:100%;text-transform:uppercase;margin:0;
                    & span[itemprop] {display:inline-block;}
                    &[itemprop="address"]::before {background-image:url('../img/icon-map.svg');}
                }
                & a {
                    color:white;text-decoration:none;
                    &[itemprop="telephone"]::before {background-image:url('../img/icon-tel.svg');}
                    &[itemprop="email"]::before {background-image:url('../img/icon-email.svg');}
                }
            }
        }
        & #cmplz-document {
            max-width:none;
            & a {color:#0a0a0a;text-decoration:underline;}
            & details {
                max-width:50rem;margin-inline:auto;
            }
        }
    }
}

footer {
    position:relative;background:var(--grey-dark);color:var(--grey-light);margin-top:-6rem;padding:8rem 4rem 4rem 4rem;position:relative;z-index:0;
    &::before {content:'';background:url('../img/bg-pattern.jpg') no-repeat top center;position:absolute;top:0;left:0;width:100%;height:100%;mix-blend-mode:darken;opacity:.35;}
    &::after {content:'';background:linear-gradient(to top, var(--grey-dark), transparent);position:absolute;bottom:0;left:0;width:100%;height:50%;}
    & * {z-index:1;}
    & p {
        text-align:right;color:white;margin:0;max-width:100%;font-size:.7rem;
        & a {
            color:white;
            &.social {
                font-family:'SocialMediaCircled';font-size:1.6rem;margin-bottom:1rem;display:inline-block;text-decoration:none;
                &:hover {color:white;}
            }
            &:hover {color:white;}
        }
    }
    & .large-9 {display:flex;align-items:center;justify-content:flex-end;}
}

body:not(.home) {
    & footer {margin-top:0;}
}

/* ANIMATIONS */
body.home section, body.home footer {
    opacity:0;transform:translateY(25%);
    &.in-view {animation:slideInFromBottom 1s ease-in-out forwards;}
}

@keyframes slideInFromBottom {
    0% {opacity:0;transform:translateY(25%);}
    100% {opacity:1;transform:translateY(0);}
}
@keyframes scaleUp {
    0% {transform:scale(0);}
    75% {transform:scale(1.2);}
    100% {transform:scale(1);}
}

/* Responsive */
@media screen and (min-width:768px) {
    main {
        & section {
            & .chiffres {
                & .swiper-wrapper {
                    margin-bottom:2rem;align-items:center;justify-content:space-evenly;
                    & .swiper-slide {
                        text-align:center;
                        & span {
                            font-size:.8rem;line-height:1.2;
                            &:first-of-type {font-size:1.5rem;line-height:1;font-weight:bold;}
                        }
                    }
                }
            }
            &#equipe {
                & .trombinoscope {
                    display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;
                    & .swiper-wrapper {
                        max-width:100%;flex-wrap:wrap;height:fit-content;align-items:flex-start;justify-content:space-evenly;
                        & .swiper-slide {flex:1 0 calc(100%/5 - 2rem);max-width:calc(100%/5 - 2rem);}
                    }
                }
            }
        }
    }
}
@media screen and (max-width:768px) {
    .grid-container {max-width:100%;}
    .grid-padding-x>.cell {padding-inline:2rem;}
    header {
        margin-top:0;
        & nav {align-items:center;justify-content:space-between;margin-top:1rem;}
        & img {max-width:300px;}
    }
    main {
        & section {
            & .chiffres {
                & .swiper-wrapper {
                    & .swiper-slide {
                        transform:scale(.75);
                        & span {
                            &:first-of-type {font-size:4.5rem;line-height:1;font-weight:bold;}
                        }
                    }
                }
                & .swiper-pagination-bullet-active {width:1.2rem;}
            }
            &#equipe {
                padding-inline:0;
                & .trombinoscope {
                    padding:0;margin:0;
                    & .swiper-wrapper {margin-bottom:2rem;}
                    & .swiper-slide {padding-inline:2rem;box-sizing:border-box;}
                    & .swiper-pagination-bullet-active {width:1.2rem;}
                }
            }
            &#map {
                aspect-ratio:1;
                & > div {right:1rem;width:calc(100% - 2rem);padding:2rem 1rem;}
            }
        }
    }
    footer {
        & p {text-align:center;margin:0;max-width:100%;width:100%;margin-top:2rem;}
    }
}