@font-face {
    font-family:'Montel';src:url('../fonts/Montel.woff2') format('woff2');font-weight:normal;font-style:normal;
}
@font-face {
    font-family:'Poppins';src:url('../fonts/poppins-regular.woff2') format('woff2');font-weight:normal;font-style:normal;
}

:root {
    --primary-color: #951b81;
    --secondary-color: #f59b1e;
    --background-color: #f4f4f4;
    --text-color: #333;
    --font-family: 'Arial', sans-serif;
    --swiper-theme-color: var(--primary-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Montel', sans-serif;
    color: var(--primary-color);
}
p:not(.accroche), ul, ol, li {
    font-family:'Poppins';line-height:1.2;width:100%;
}
.grid-container {
    max-width:100%;
}

body {
    background:linear-gradient(0deg,rgba(255, 241, 225, 1) 0%, rgba(255, 255, 255, 1) 100%);font-family:'Montel';
    & main {
        & section {
            &:has(h1) {
                overflow:hidden;
            }
            &.grid-padding-x > .cell {
                position:relative;;
                &:first-of-type {
                    padding-inline:0;overflow:hidden;border-bottom-right-radius:15rem;
                }
                &:has(h1) {
                    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
                }
                & > .content {
                    position:relative;display:block;width:100%;height:100vh;overflow-x:hidden;overflow-y:auto;z-index:0;
                }
                &:has(.content) {
                    padding-right:0;
                }
            }
            & img {
                width:100%;height:100vh;display:block;object-fit:cover;object-position:center bottom;animation:zoomIn 15s ease-out forwards;
            }
            & h1 {
                font-size:0;line-height:0;aspect-ratio:1;position:absolute;top:10vh;left:-7.5vw;width:15vw;height:auto;border-radius:50%;
                overflow:hidden;z-index:1;background:white;box-shadow:0 42px 24px 0 rgba(74, 23, 67, 0.1);display:flex;align-items:center;justify-content:center;

                &::before {
                    content:'';display:block;background:url('../img/logo-laspheredelaetitia.svg') no-repeat center center;background-size:cover;width:90%;height:90%;
                }
            }
            & h2 {
                text-align:center;font-size:1.6rem;font-style:italic;font-weight:700;
                & span {
                    display:block;color:var(--secondary-color);
                }
            }
            & p {
                text-align:center;
                &.accroche {
                    position:relative;top:0;left:0;color:white;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:15vh;font-size:1.2rem;line-height:1.2;padding-bottom:2rem;margin-inline:auto;
                    &::before {
                        content:'';display:block;width:100%;height:auto;background:var(--primary-color);aspect-ratio:1;position:absolute;bottom:0;left:20%;border-radius:50%;z-index:-1;width:60%;
                    }
                    & span {
                        position:absolute;top:0;left:0;width:100%;height:100%;
                        &::before {
                            content:'';display:block;width:100%;height:auto;background:url('../img/palme.svg') no-repeat right center;background-size:contain;position:absolute;top:-14vh;left:11vw;z-index:2;width:100%;height:40vh;transform:scaleX(.8) scaleY(-.8) rotate(-47deg);pointer-events:none;;
                        }
                        &::after {
                            content:'';display:block;width:100%;height:auto;background:url('../img/palme.svg') no-repeat right center;background-size:contain;position:absolute;top:-14vh;left:11vw;z-index:1;width:100%;height:40vh;transform:scaleX(.8) scaleY(-.8) rotate(-60deg) translate(5vw, -2vw);filter:blur(10px) opacity(0.5) grayscale(1);mix-blend-mode:multiply;pointer-events:none;;
                        }
                    }
                    & + p {
                        font-family:'Montel', sans-serif;font-style:italic;
                    }
                }
                & strong {
                    color:var(--secondary-color);
                }
            }
            & h2 {
                margin-bottom:2rem;
            }
            &.grid-padding-x .grid-padding-x {
                max-width:70%;margin-inline:auto;
                & h3 {
                    font-family:'Poppins';line-height:1.2;font-size:1.2rem;font-weight:bold;border-bottom:3px dotted var(--secondary-color);padding-bottom:1.5rem;margin-bottom:1.5rem;width:fit-content;
                }
                & p {
                    text-align:left;color:var(--primary-color);
                }
                & ul {
                    list-style:none;color:var(--primary-color);font-style:italic;margin:0;padding-left:0;
                    & li {
                        margin-bottom:2rem;position:relative;padding-left:.75rem;font-weight:bold;
                        &::before {
                            content:'›';color:var(--primary-color);font-weight:bold;position:absolute;left:0;
                        }
                        & span {
                            display:block;color:var(--secondary-color);font-weight:normal;
                        }
                    }
                }
            }
            & .bloc-cta {
                position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;border:1px solid var(--secondary-color);border-radius:6rem;width:100%;max-width:100%;padding:3rem 2rem;margin-inline:auto;
                & span {
                    display:block;width:100%;height:auto;background:var(--secondary-color);position:absolute;top:0;right:0;z-index:2;width:6rem;aspect-ratio:1;border-radius:50%;transform:translateY(-65%);
                    &::after {
                        content:'';display:block;width:120%;height:100%;background:url('../img/palme-white.svg') no-repeat left center;background-size:contain;position:absolute;top:0;left:-30%;z-index:2;
                    }
                }
                & p {
                    color:var(--primary-color);font-family:'Montel';font-weight:bold;font-size:1.5rem;font-style:italic;margin:0;display:flex;flex-direction:column;gap:.5rem;align-items:center;
                    & a {
                        font-style:bold;font-family:'Poppins';text-decoration:none;
                        &[href^="tel:"] {
                            color:var(--primary-color);font-size:1.9rem;
                        }
                        &[href^="mailto:"] {
                            color:var(--secondary-color);font-size:.875rem;
                        }
                        &:hover {
                            text-decoration:none;
                        }
                    }
                }
            }
            & .swiper {
                &::before {
                    content:'';display:block;width:100%;height:2px;border:1px dashed var(--secondary-color);position:absolute;top:4.5rem;left:0;z-index:0;
                }
                & .swiper-slide {
                    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;width:100%;height:100%;position:relative;text-align:center;padding:2rem 1rem;box-sizing:border-box;font-family:'Poppins';color:var(--secondary-color);font-weight:bold;font-size:.9rem;font-style:italic;
                    & span {
                        position:relative;display:block;width:5rem;aspect-ratio:1;position:relative;background:var(--secondary-color);border-radius:50%;
                        & img {
                            width:100%;height:100%;object-fit:cover;object-position:center center;margin-left:-10%;animation:none;
                            &.flag {
                                position:absolute;transform:rotate(20deg);left:40%;top:-20%;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:1620px) {
    body {
        & main {
            & section {
                & .bloc-cta {
                    & p {
                        font-size:1.2rem;
                        & a {
                            &[href^="tel:"] {
                                font-size:1.5rem;
                            }
                            &[href^="mailto:"] {
                                font-size:.7rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:1400px) {
    body {
        & main {
            & section {
                & .content {
                    & .grid-x {
                        &:has(.bloc-cta) {
                            & .cell {
                                width:100%;max-width:100%;
                            }
                        }
                    }
                    & .bloc-cta {
                        max-width:80%;
                        & span {
                            width:5rem;top:1rem;right:1rem;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:900px) {
    body {
        & main {
            & section {
                & .content {
                    & .bloc-cta {
                        max-width:100%;margin-top:2rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:639px) {
    body {
        & main {
            & section {
                & p {
                    &.accroche {
                        & span {
                            &::before, &::after {
                                width:80%;
                            }
                        }
                    }
                }
                &.grid-padding-x > .cell {
                    &:first-of-type {
                        border-radius:0;
                        & img {
                            height:40vh;object-fit:cover;object-position:center center;
                        }
                    }
                    & > .content {
                        height:fit-content;overflow:auto;
                    }
                }
                & h1 {
                    top:-30vh;left:auto;width:10rem;max-width:80%;
                }
                &.grid-padding-x .grid-padding-x {
                    max-width:90%;
                }
            }
        }
    }    
}

/* Animations */
@keyframes zoomIn {
    from {
        transform:scale(1);
    }
    to {
        transform:scale(1.2);
    }
}