@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family:'CooperBeckerBlack-Outline';
    src: url('../fonts/CooperBeckerBlack-OutlinePRegular.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;
}
@font-face {font-family:'SocialMediaCircled';src:url('../fonts/Social-Media-Circled.woff') format('woff');font-style:normal;font-weight:normal;}

:root {
    --black:#000;
    --orange:#c7955a;
    --orange-2:#ce9d46;
    --pink:#e0a2b7;
    --light-pink:#f5e6eb;
    --beige:#c8b5a0;
    --cursor-size:24px;
	--background:#f2f2f2;
    --swiper-pagination-color:var(--orange);
    --swiper-navigation-color:var(--orange);
}

body {
    font-family:'Noto Serif Display', serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family:'Noto Serif Display';line-height:1.2;
}
p, ul, ol {
    line-height:1.2;
}

a {
    &:hover {
        color:var(--orange);
    }
    &.cta {
        color:var(--black);display:flex;align-items:center;gap:1rem;position:relative;width:fit-content;text-transform:uppercase;font-size:.8rem;font-weight:bold;transition:all .25s ease-in-out;
        &::before {
            content:'';background:url('../img/icon-feuille.svg') no-repeat center center;background-size:cover;border-radius:50%;display:block;aspect-ratio:1;width:3rem;transition:all .25s ease-in-out;
        }
        &::after {
            content:'';display:block;width:calc(100% - 4rem);height:1px;background:var(--orange);position:absolute;bottom:0;right:0;transition:width .25s ease-in-out;
        }
        &:hover {
            &::before {
                transform:rotateX(360deg);
            }
            &::after {
                width:0;
            }
        }
    }
    &.plus {
        text-transform:uppercase;color:var(--black);display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:bold;justify-content:center;flex-direction:column;margin-top:2rem;transition:all .25s ease-in-out;
        &::before {
            content:'';display:block;width:1rem;aspect-ratio:1;background:var(--pink);border-radius:50%;transition:all .25s ease-in-out;
        }
        &::after {
            content:'';display:block;width:1rem;height:1px;background:var(--black);transition:all .25s ease-in-out;
        }
        &:hover {
            &::before {
                transform:scale(1.5);
            }
            &::after {
                width:2rem;
            }
        }
    }
    &.back {
        text-transform:uppercase;color:var(--black);display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:bold;justify-content:center;flex-direction:column;margin-top:2rem;transition:all .25s ease-in-out;
        &::after {
            content:'';display:block;width:1rem;height:1px;background:var(--black);transition:all .25s ease-in-out;
        }
        &:hover {
            &::before {
                transform:scale(1.5);
            }
            &::after {
                width:2rem;
            }
        }
    }
}

body {
    overflow-x:hidden;
}

header {
    position:relative;
    &::before {
        content:'';position:absolute;display:block;width:100%;height:var(--height-window, 40vh);z-index:-1;top:15%;left:0;background:url('../img/pattern-header.jpg') no-repeat center center;
    }
    & .cell:has(nav) {
        display:flex;align-items:center;
        & [type="checkbox"] {
            display:none;
            &:checked {
                & ~ .burger {
                    & span {
                        &:first-of-type {
                            transform:rotate(45deg) translate(6px, 6px);
                        }
                        &:last-of-type {
                            transform:rotate(-45deg) translate(5px, -5px);
                        }
                        &:nth-of-type(2) {
                            width:0;
                        }
                    }
                }
                & ~ nav {
                    top:0;
                }
            }
        }
        & .burger {
            display:none;border:1px solid var(--background);border-radius:50%;padding:.5rem;position:fixed;z-index:1;top:.5rem;right:.5rem;flex-direction:column;gap:.35rem;aspect-ratio:1;justify-content:center;align-items:center;mix-blend-mode:difference;z-index:99999;margin:0;
            & span {
                display:block;width:1.4rem;height:2px;background:var(--background);margin:0;transition:all .25s ease-in-out;
            }
        }
        & nav {
            width:100%;
            & ul {
                display:flex;
                justify-content:space-between;
                list-style-type:none;
                padding:0;
                margin:0;
                font-family:'Poppins';text-transform:uppercase;
                & li {
                    & a {
                        text-decoration:none;
                        color:var(--black);
                        &:hover {
                            color:var(--orange);
                        }
                    }
                    &:has(a[href*="/blog/"]) {
                        position:relative;width:10rem;
                        & a {
                            color:var(--pink);font-family:'Noto Serif Display';text-transform:none;font-size:3rem;position:absolute;top:-3.4rem;left:0;width:100%;text-align:center;
                            &::before {
                                content:'‘';
                                font-size:200%;
                            }
                            &::after {
                                content:'';position:absolute;width:100%;height:var(--height-header-figure, 24rem);background:var(--black);top:1.5rem;left:0;border-radius:8rem;z-index:-1;transition:all .25s ease-in-out;
                            }
                            &:hover {
                                color:white;
                                &::before {
                                    color:var(--pink);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    &:has(form) {
        & .cell:has(.bulle) {
            width:50%;
            & + .cell {
                width:16.6666666667%;
            }
        }
    }
    & a.logo {
        color:var(--black);
        & img[src$=".svg"] {
            width:50%;margin-top:1rem;margin-inline:auto;display:block;
        }
        & div {
            display:none;align-items:center;justify-content:center;flex-direction:column;width:100%;
            & span {
                text-align:center;font-size:1.6rem;
                &:nth-child(2) {
                    font-family:'Poppins';font-size:70%;color:var(--orange);
                }
            }
        }
    }
    & figure {
        position:relative;
        & img {
            max-width:15rem;margin:2rem 0 0 auto;display:block;position:relative;z-index:1;
        }
        & figcaption {
            position:absolute;z-index:0;top:-2rem;left:0;
            & p {
                font-family:'CooperBeckerBlack-Outline';color:var(--pink);font-size:2rem;line-height:.75;
                & span {
                    display:block;
                    &:first-of-type {
                        font-size:90%;
                        text-transform:uppercase;
                        margin-left:1.5rem;
                    }
                    &:nth-of-type(2) {
                        font-size:120%;
                        margin-left:1.5rem;
                    }
                    &:nth-of-type(3) {
                        font-size:140%;
                        color:var(--orange);
                        margin-left:-3rem;
                    }
                    &:last-of-type {
                        font-size:65%;
                        margin-left:.5rem;
                    }
                }
            }
        }
        & > span {
            position:absolute;border-radius:50%;display:block;aspect-ratio:1;mix-blend-mode:multiply;
            &.pink {
                background:var(--pink);width:12rem;bottom:0;right:-.9rem;
                &.half {
                    left:-10rem;right:auto;bottom:-18rem;width:20rem;
                    clip-path:polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 0%);
                }
            }
            &.orange {
                background:var(--orange);width:6rem;top:-5rem;right:0;
                &.half {
                    right:-.9375rem;border-radius:0;border-top-left-radius:3rem;border-bottom-left-radius:3rem;aspect-ratio:auto;height:6rem;width:3rem;
                    &.ttl {
                        clip-path:polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 0%);
                    }
                }
                &.long {
                    border-radius:8rem;top:auto;bottom:-24rem;height:20rem;width:8rem;left:calc(50% - 1rem);
                }
            }
            &.white {
                background: white;
                width: 8rem;
                bottom: -12rem;
                left: calc(50% - 1rem);
                z-index: 1;
                mix-blend-mode: normal;
            }
        }
    }
    & h1 {
        margin-top:3rem;
    }
    & h2 {
        font-family:'Poppins';font-size:1.2rem;font-weight:normal;color:var(--orange);margin-bottom:2rem;
    }
    & .bulle {
        background:white;border-radius:15rem;
        display:flex;
        flex-direction:column;
        justify-content:center;
        width:fit-content;
        padding:7rem 5rem;
        & ul {
            padding:0;margin:0;list-style-type:none;
            & li {
                padding:.5rem 2rem;border-bottom:1px solid var(--orange);font-size:1.2rem;
                & a {
                    text-decoration:none;
                    color:var(--black);
                    font-size:1.5rem;
                    font-weight:bold;
                    &:hover {
                        color:var(--orange);
                    }
                }
            }
        }
        & a.cta {
            margin-top:2rem;
        }
    }
}

main {
    & section {
        position:relative;
        &#blog, &#widget-blog {
            & .blog {
                display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:3rem;max-width:85%;position:relative;
                & > div:not(.pagination), & > article {
                    border-radius:50rem;border:1px solid var(--pink);padding:7rem 5rem;
                    & p {
                        font-family:'Poppins';font-size:1.1rem;line-height:1.5;
                    }
                    & a.plus {
                        margin-top:8rem;
                    }
                }
            }
        }
        &#references {
            & > img {
                position:absolute;bottom:-15%;left:0;z-index:-1;width:auto;height:70%;
            }
            &::before {
                content:'';display:block;width:auto;height:100%;background:var(--pink);border-radius:50%;position:absolute;top:0;left:0;z-index:-1;aspect-ratio:1;transform:translateX(-50%);
            }
            & h2 {
                margin-left:5rem;margin-bottom:3rem;
            }
            & .references {
                display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:3rem;
                & h3 {
                    font-weight:bold;font-size:1.4rem;
                }
                & p {
                    font-size:.9rem;font-family:'Poppins';max-width:90%;
                }
            }
            & a.cta {
                margin-left:5rem;margin-top:5rem;
            }
            & span.motifs {
                position:absolute;bottom:20%;right:3rem;width:4rem;aspect-ratio:1;background:var(--orange);border-radius:50%;z-index:-1;opacity:.23;transform:scale(1.2) translateX(-75%);
                &::before, &::after {
                    content:'';width:4rem;aspect-ratio:1;background:var(--orange);border-radius:50%;z-index:-1;position:absolute;top:0;left:-5rem;
                }
                &::after {
                    left:5rem;
                }
            }
        }
        &#romans {
            &::after {
                content:'';display:block;background:var(--black);position:absolute;bottom:15%;z-index:-1;right:0;border-radius:0;border-top-left-radius:10rem;border-bottom-left-radius:10rem;aspect-ratio:auto;height:20rem;width:10rem;
            }
            & h2 {
                color:var(--light-pink);line-height:.8;font-size:5rem;margin-bottom:3rem;
                &::first-line {
                    font-family:'CooperBeckerBlack-Outline';font-size:85%;color:var(--pink);
                }
            }
            & span.motifs {
                position:relative;
                &::before {
                    content:'';background:var(--orange);width:3rem;height:6rem;border-radius:3rem;display:block;position:absolute;top:5rem;left:0;
                }
                &::after {
                    content:'';background:var(--light-pink);width:6rem;aspect-ratio:1;border-radius:3rem;display:block;position:absolute;top:8rem;left:1.5rem;mix-blend-mode:multiply;
                }
            }
            & .romans {
                display:flex;align-items:center;justify-content:center;gap:6rem;margin-bottom:3rem;max-width:85%;
                & figure {
                    flex:1 0 40%;
                    & img {
                        aspect-ratio:600/788;object-fit:cover;width:100%;height:auto;display:block;
                    }
                    & figcaption {
                        display:flex;align-items:center;flex-direction:column;line-height:1.1;font-size:1.6rem;text-align:center;max-width:60%;margin-inline:auto;margin-top:2rem;
                        & span {
                            font-family:'Poppins';font-size:1rem;color:var(--pink);text-transform:uppercase;font-weight:bold;
                        }
                    }
                }
            }
        }
        &.accordion {
            & details {
                font-family:'Poppins';border-bottom:1px solid var(--orange);
                & summary {
                    position:relative;font-family:'Noto Serif Display';flex:0 0 100%;font-size:1.5rem;line-height:3;padding-left:2rem;list-style:none;cursor:pointer;
                    &::after {
                        content:'\f077';font-family:"FontAwesome";color:var(--orange);transform:rotate(180deg);position:absolute;right:0;font-weight:600;transition:all .25s ease-in-out;
                    }
                }
                & .content {
                    display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;width:100%;
                    & img {
                        max-width:10rem;border-radius:50%;object-fit:cover;object-position:center;
                    }
                    & > div {
                        flex:1 0 calc(100% - 10rem);padding-inline:2rem;box-sizing:border-box;text-align:justify;
                    }
                }
                &[open] {
                    padding-bottom:2rem;
                    & summary {
                        &::after {
                            transform:rotate(0);
                        }
                    }
                }
            }
        }
        &#mes-references {
            & .swiper {
                padding-bottom:2rem;
                & .swiper-slide {
                    display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem;width:100%;
                    & > article {
                        flex:calc(100%/3 - 2rem);max-width:calc(100%/3 - 2rem);padding:1rem 2rem;box-sizing:border-box;border-right:1px solid var(--orange);
                        & h3 {
                            font-weight:bold;font-size:1.4rem;
                        }
                        & p {
                            font-family:'Poppins';max-width:100%;line-height:1.5;
                        }
                        &:nth-child(3n) {
                            border-right:none;
                        }
                        &:last-child() {
                            border-right:none;
                        }
                    }
                }
            }
            & .swiper-horizontal>.swiper-pagination-bullets, & .swiper-pagination-bullets.swiper-pagination-horizontal, & .swiper-pagination-custom, & .swiper-pagination-fraction {
                bottom:0;
            }
        }
    }
}


footer {
    margin-top:5rem;position:relative;
    &::before {
        content: '';
        display: block;
        width: 4rem;
        aspect-ratio: 1;
        background:var(--black);position:absolute;z-index:1;border-radius:50%;bottom:60%;right:13%;
    }
    &::after {
        content: '';
        display: block;
        width:10rem;
        aspect-ratio: 1;
        background:var(--pink);position:absolute;z-index:1;border-radius:50%;top:-20%;right:14%;clip-path:polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 0%);transform:scale(-1);mix-blend-mode:multiply;
    }
    & .grid-container {
        &:first-of-type {
            background:url('../img/pattern-header.jpg') no-repeat center center;
        }
    }
    & .logo {
        display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem;margin-top:-5rem;
        &::before {
            content:'';
            display:block;
            width:10rem;
            aspect-ratio:1;
            background:url('../img/logo-manuela.svg') no-repeat center center;
        }
        & span {
            font-family:'Poppins';font-size:35%;text-transform:uppercase;color:var(--orange);
        }
    }
    & ul {
        display:flex;justify-content:center;list-style-type:none;padding:0;margin:5rem 0;
        & li {
            flex:1 0 calc(100%/3);text-align:center;
            & a {
                color:var(--black);
            }
        }
    }
    & nav {
        & ul {
            display:flex;justify-content:center;list-style-type:none;padding:0;margin:2rem 0;
            & li {
                flex:0 0 fit-content;font-family:'Poppins';color:var(--pink);font-size:.8rem;
                &:not(:last-of-type) {
                    &::after {
                        content:'•';
                        display:inline-block;
                        padding-inline:1rem;
                    }
                }
            }
        }
    }
    & .social {
        font-family:'SocialMediaCircled';font-size:3rem;display:flex;align-items:center;justify-content:center;color:var(--black);border-radius:50%;border:1px solid var(--orange);width:6rem;height:6rem;position:absolute;bottom:4rem;transition:all .25s ease-in-out;
        &:hover {
            background:var(--orange);color:white;
        }
    }
}

body {
    &.home {
        & main {
            & section {
                padding-top:8rem;padding-bottom:8rem;
                &#blog {
                    margin-top:4rem;
                    &::before {
                        content:'';display:block;width:auto;height:4rem;background:none;border:1px solid var(--black);border-radius:50%;position:absolute;top:-3rem;right:28%;z-index:-1;aspect-ratio:1;
                    }
                    &::after {
                        content:'';display:block;width:auto;height:6rem;background:var(--light-pink);border-radius:50%;position:absolute;bottom:5rem;left:30%;z-index:-1;aspect-ratio:1;
                    }
                    & h2 {
                        position:relative;color:var(--pink);line-height:.8;font-size:3rem;margin-bottom:3rem;background:var(--black);border-radius:50rem;padding:5rem;text-align:center;width:fit-content;height:22rem;z-index:0;left:5rem;top:-5rem;
                        &::before {
                            content:'‘';position:absolute;top:0;right:0;font-family:'Noto Serif Display';font-size:400%;color:var(--pink);
                        }
                        &::after {
                            content:'';position:absolute;bottom:-4rem;left:-3rem;background:var(--orange);width:6rem;height:12rem;display:block;z-index:-1;border-radius:3rem;
                        }
                        & + a {
                            display:flex;align-items:center;justify-content:center;margin-top:-5rem;border-radius:50%;border:1px solid var(--pink);text-transform:uppercase;font-size:.7rem;font-weight:bold;aspect-ratio:1;width:10rem;z-index:1;position:relative;margin-left:3rem;color:var(--black);flex-direction:column;left:5rem;top:-7rem;transition:all .25s ease-in-out;
                            &:hover {
                                background:var(--pink);color:white;
                                &::before {
                                    background-image:url('../img/feuille-white.svg');
                                }
                            }
                            &::before {
                                content:'';background:url('../img/feuille.svg') no-repeat center center;background-size:cover;display:block;aspect-ratio:950/295;width:60%;
                            }
                        }
                    }
                }
            }
        }
    }
    &:not(.home) {
        &.single {
            & header {
                &::before {
                    height:calc(var(--h1-bottom-position) - var(--height-header-logo));
                }
                & .cell:has(.bulle) {
                    & .bulle {
                        padding-right:2rem;border-radius:50%;aspect-ratio:1;justify-content:flex-start;
                        & p {
                            &.breadcrumb {
                                font-family:'Poppins';font-size:.8rem;line-height:1.2;color:var(--beige);text-transform:uppercase;padding:0;margin:0;
                                & a {
                                    color:var(--beige);
                                    &:hover {
                                        color:var(--orange);
                                    }
                                }
                            }
                            &.categorie {
                                font-family:'Poppins';font-size:.8rem;color:var(--pink);text-transform:uppercase;font-weight:bold;
                            }
                        }
                        & h1 {
                            font-size:2.8rem;
                            &:has(+ p.categorie) {
                                margin-bottom:1rem;
                            }
                        }
                    }
                }
                & a {
                    &.back {
                        margin-left:-100%;
                    }
                }
            }
        }
        &.single-post {
            & header {
                & figure {
                    & img {
                        max-width:14rem;
                    }
                }
                & .cell:has(.bulle) {
                    width:50%;
                    & + .cell {
                        width:16.6666666667%;
                    }
                }
            }
        }
        &.single-roman {
            header {
                & figure {
                    margin-top:5rem;
                    &:has(figcaption) {
                        & > span {
                            &.orange {
                                &.half {
                                    top:-2rem;
                                }
                            }
                        }
                    }
                    & figcaption {
                        & p {
                            display:none;
                        }
                    }
                }
                & a {
                    &.back {
                        position:absolute;bottom:0;left:60%;margin:0;
                    }
                }
            }
        }
        & header {
            &::before {
                top:var(--height-header-logo, 21%);
            }
            &::after {
                content:'';background:url('../img/icon-feuille.svg') no-repeat center center;background-size:cover;border-radius:50%;display:block;aspect-ratio:1;width:3rem;transition:all .25s ease-in-out;margin-inline:auto;position:relative;
            }
            & a.logo {
                & img[src$=".svg"] {
                    width:25%;
                }
                & div {
                    display:flex;
                }
            }
            & .cell:has(nav) {
                & nav {
                    padding-top:7rem;
                    & ul {
                        & li {
                            &:has(a[href^="blog"]) {
                                & a {
                                    &::after {height:17rem;}
                                }
                            }
                        }
                    }
                }
            }
            & .bulle {
                position:relative;margin-top:5rem;
                &::before {
                    content:'';display:block;width:auto;height:3rem;background:none;border:1px solid var(--black);border-radius:50%;position:absolute;top:3rem;left:3rem;z-index:1;aspect-ratio:1;
                }
                & h1 {
                    margin-top:0;margin-bottom:3rem;
                }
                & p {
                    font-family:'Poppins';font-size:1rem;line-height:1.4;
                }
            }
            & .photo-header {
                aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:center;transform:scale(1.6);margin-top:5rem;margin-left:-.9375rem;transform-origin:0 0;position:relative;z-index:2;
            }
            & figure {
                margin-top: 5rem;
                &:has(figcaption) {
                    margin-top:7rem;
                    & > span {
                        &.orange {
                            &.half {
                                top:-4rem;
                            }
                        }
                    }
                }
                & > span {
                    &.orange {
                        &.half {
                            top:-2rem;
                        }
                    }
                }
                & img {
                    max-width: 10rem;
                    margin: -2rem auto 0 auto;
                }
            }
        }
        & main {
            & section {
                padding-top:4rem;padding-bottom:4rem;
                &#blog {
                    & .blog {
                        flex-wrap:wrap;max-width:100%;gap:4rem;padding-inline:4rem;
                        & > div:not(.pagination), & > article {
                            flex:1 0 calc(100%/2 - 2rem);
                            & h2 {
                                font-size:2rem;
                            }
                            & p {
                                &:empty {
                                    display:none;
                                }
                            }
                            & a.plus {
                                &::before {
                                    content:'‘';font-size:11rem;background:none;color:var(--pink);line-height:0;text-align:center;width:auto;aspect-ratio:auto;border-radius:0;
                                }
                            }
                        }
                    }
                    & .pagination {
                        display:flex;align-items:center;justify-content:center;width:100%;
                        & .current {
                            background:var(--pink);border-radius:50%;color:var(--black);font-weight:bold;
                        }
                        & a {
                            &.page-numbers {
                                border-radius:50%;
                            }
                            &.next, &.prev {
                                font-size:0;
                                &::before {
                                    font-size:1.6rem;aspect-ratio:1;line-height:1;
                                }
                            }
                            &.next {
                                &::before {
                                    content:'>';
                                }
                            }
                            &.prev {
                                &::before {
                                    content:'<';
                                }
                            }
                        }
                    }
                }
                &#widget-blog {
                    margin-top:4rem;
                    &::before {
                        content:'';display:block;width:auto;height:4rem;background:none;border:1px solid var(--black);border-radius:50%;position:absolute;top:-3rem;right:28%;z-index:-1;aspect-ratio:1;
                    }
                    &::after {
                        content:'';display:block;width:auto;height:6rem;background:var(--light-pink);border-radius:50%;position:absolute;bottom:5rem;left:30%;z-index:-1;aspect-ratio:1;
                    }
                    & h2 {
                        position:relative;color:var(--pink);line-height:.8;font-size:3rem;margin-bottom:3rem;background:var(--black);border-radius:50rem;padding:5rem;text-align:center;width:fit-content;height:22rem;z-index:0;left:5rem;top:-5rem;
                        &::before {
                            content:'‘';position:absolute;top:0;right:0;font-family:'Noto Serif Display';font-size:400%;color:var(--pink);
                        }
                        &::after {
                            content:'';position:absolute;bottom:-4rem;left:-3rem;background:var(--orange);width:6rem;height:12rem;display:block;z-index:-1;border-radius:3rem;
                        }
                        & + a {
                            display:flex;align-items:center;justify-content:center;margin-top:-5rem;border-radius:50%;border:1px solid var(--pink);text-transform:uppercase;font-size:.7rem;font-weight:bold;aspect-ratio:1;width:10rem;z-index:1;position:relative;margin-left:3rem;color:var(--black);flex-direction:column;left:5rem;top:-7rem;transition:all .25s ease-in-out;
                            &:hover {
                                background:var(--pink);color:white;
                                &::before {
                                    background-image:url('../img/feuille-white.svg');
                                }
                            }
                            &::before {
                                content:'';background:url('../img/feuille.svg') no-repeat center center;background-size:cover;display:block;aspect-ratio:950/295;width:60%;
                            }
                        }
                    }
                }
                &.zone-de-texte {
                    & article {
                        display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
                        & h2 {
                            flex:1 0 100%;font-size:1.5rem;display:flex;align-items:center;justify-content:flex-start;gap:1rem;margin-bottom:3rem;
                            &::before {
                                content:'';background:var(--pink);border-radius:50%;width:1rem;height:1rem;display:block;
                            }
                        }
                        & img {
                            width:10rem;border-radius:50%;object-fit:cover;object-position:center;
                        }
                        & > div {
                            flex:1 0 calc(100% - 11rem);padding-inline:2rem;box-sizing:border-box;text-align:justify;font-family:'Poppins';font-size:1rem;line-height:1.5;margin-bottom:3rem;
                        }
                    }
                }
                &.ctas {
                    margin-top:0;padding-top:0;
                }
                &:has(+ .ctas) {
                    margin-bottom:0;padding-bottom:0;
                }
                &#romans {
                    & .romans {
                        max-width:100%;gap:3rem;justify-content:flex-start;flex-wrap:wrap;align-items:flex-start;
                        & figure {
                            flex:0 0 calc(100%/3 - 3rem);
                            & figcaption {
                                max-width:80%;
                            }
                        }
                    }
                }
            }
        }
    }
}

[data-hover] {
	position: relative;

	[data-hover-bounds] {
		position: absolute;
		left: 0;
		top: 0;
		inset: 0;

		/* 		outline: 1px solid red; */
	}

	&:hover {
		[data-hover-bounds] {
			transform: scale(4);
		}
	}
}

.cursor {
	width: var(--cursor-size);
	height: var(--cursor-size);
	border-radius: 50%;

	position: fixed;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);

	background: var(--background);
	mix-blend-mode: difference;
	pointer-events: none;
}

@media screen and (max-width:1050px) {
    body {
        &:not(.home) {
            & main {
                & section {
                    &#widget-blog {
                        & h2 {
                            padding: 5rem 4rem;
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:930px) {
    body {
        & p, & ul, & ol {
            font-size:.9rem;
        }
        & h1, & .h1 {
            font-size:2.6rem;
        }
        &:not(.home) {
            & header {
                & .cell:has(nav) {
                    padding-left:0;
                    & nav {font-size:.9rem;}
                }
                & .bulle {
                    & p {
                        font-size:.9rem;
                    }
                }
            }
            & main {
                & section {
                    &#widget-blog {
                        & h2 {
                            padding: 5rem 3rem;
                            & + a {
                                position:relative;
                                &::after {
                                    content:'';position:absolute;width:100%;height:100%;background:white;border-radius:50%;top:0;left:0;z-index:-1;
                                }
                            }
                        }
                    }
                }
            }
            &.single-post {
                & header {
                    & figure {
                        & img {
                            max-width: 13rem;
                        }
                    }
                }
            }
        }
        & header {
            & .cell:has(nav) {
                padding-left:0!important;
                & nav {font-size:.9rem;}
            }
            & figure {
                & img {
                    max-width: 13rem;
                }
            }
        }
        main {
            & section {
                &#blog, &#widget-blog {
                    & .blog {
                        & > div:not(.pagination), & > article {
                            & p {
                                font-size:.9rem;
                            }
                        }
                    }
                }
                &#romans {
                    & h2 {
                        font-size:3.9rem;
                    }
                    &::after {
                        bottom:35%;height:15rem;width:7.5rem;
                    }
                }
                &#references {
                    & > img {
                        height:60%;
                    }
                }
            }
        }
        &.home {
            & main {
                & section {
                    &#blog {
                        & h2 {
                            padding:5rem 3rem;& + a {
                                position:relative;
                                &::after {
                                    content:'';position:absolute;width:100%;height:100%;background:white;border-radius:50%;top:0;left:0;z-index:-1;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:850px) {
    body {
        & header {
            & .cell:has(nav) {
                & nav {
                    position:fixed;top:-100vh;right:0;width:100vw;height:100vh;background:var(--background);z-index:9999;transition:all .25s ease-in-out;display:flex;align-items:center;justify-content:center;padding:0;margin:0;padding-top:0!important;
                    & ul {
                        flex-direction:column;align-items:center;justify-content:center;gap:1rem;text-align:center;
                        & li {
                            & a {
                                font-family:'Noto Serif Display';text-transform:none;font-size:2rem;
                            }
                            &:has(a[href*="/blog/"]) {
                                & a {
                                    position:relative;top:0;font-size:2rem;
                                    &::before, &::after {
                                        display:none;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    header {
        & .cell:has(nav) {
            & .burger {
                display:flex;
            }
        }
        & .bulle {
            padding:6rem 3rem;
        }
    }
}
@media screen and (max-width:640px) {
    body {
        & header {
            overflow-x:hidden;width:100vw;
            & h1, & h2 {
                text-align:center;
            }
            & figure {
                & figcaption {
                    & p {
                        margin-left:4rem;
                    }
                }
                & img {
                    max-width:12rem;
                }
                & > span {
                    &.pink {
                        display:none;
                        &.half {
                            display:none;
                        }
                    }
                    &.white {
                        display:none;
                    }
                    &.orange {
                        display:none;
                        &.half {
                            display:none;
                        }
                        &.long {
                            display:none;
                        }
                    }
                }
            }
            & .bulle {
                padding:4rem;
            }
        }
        & main {
            overflow-x:hidden;width:100vw;
            & section {
                padding-top:4rem;padding-bottom:4rem;
                &#blog, &#widget-blog {
                    & .blog {
                        justify-content:flex-start;width:100%;max-width:100%;
                        overflow-x:auto!important;scrollbar-width:none;scroll-snap-type:x mandatory;justify-content:flex-start;flex-wrap:nowrap;scroll-snap-align:start;
                        & > div:not(.pagination), & > article {
                            flex:1 0 100%;scroll-snap-align:start;padding:5rem;
                            & a.plus {
                                margin-top:4rem;
                            }
                        }
                    }
                }
                &#blog {
                    margin-top:0;
                    & .grid-x {
                        flex-direction:column-reverse;
                    }
                }
                &#romans {
                    &::after {
                        display:none;
                    }
                    & h2 {
                        text-align:center;
                    }
                    & a.cta {
                        margin-inline:auto;margin-bottom:2rem;
                    }
                    & span.motifs {
                        display:none;
                    }
                    & .romans {
                        gap:2rem;margin-bottom:0;justify-content:flex-start;width:100%;max-width:100%;
                        overflow-x:auto!important;scrollbar-width:none;scroll-snap-type:x mandatory;justify-content:flex-start;flex-wrap:nowrap;scroll-snap-align:start;
                        & > figure {
                            flex:1 0 100%!important;scroll-snap-align:start;padding-inline:2rem;
                        }
                    }
                }
                &#references {
                    & h2 {
                        font-size:2rem;
                    }
                    & > img {
                        height:50%;
                    }
                    & .references {
                        overflow-x:auto!important;scrollbar-width:none;scroll-snap-type:x mandatory;justify-content:flex-start;flex-wrap:nowrap;scroll-snap-align:start;
                        & > div {
                            flex:1 0 100%;scroll-snap-align:start;padding-inline:2rem;
                        }
                    }
                    & a.cta {
                        margin-left:8rem;margin-top:4rem;
                    }
                }
                &.accordion {
                    & details {
                        & summary {
                            font-size:1.2rem;
                        }
                        & .content {
                            flex-direction:column;
                            & img {
                                max-width:70%;margin:1rem auto 2rem auto;
                            }
                        }
                    }
                }
                &#mes-references {
                    & .swiper {
                        & .swiper-slide {
                            & > article {
                                flex:1 0 100%;max-width:100%;
                            }
                        }
                    }
                }
            }
        }
        & footer {
            &::before {
                width:3rem;right:3%;display:none;
            }
            &::after {
                display:none;
            }
            & ul {
                flex-direction:column;align-items:center;justify-content:center;
            }
            & nav {
                & ul {
                    flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
                    & li {
                        &:not(:last-of-type) {
                            &::after {
                                display:none;
                            }
                        }
                    }
                }
            }
            & .social {
                position:relative;bottom:0;
            }
        }
        &.home {
            & main {
                & section {
                    padding-top:4rem;padding-bottom:4rem;
                    &#blog {
                        margin-top:0;
                        & h2 {
                            height:18rem;
                        }
                    }
                }
            }
        }
        &:not(.home) {
            & header {
                & .photo-header {
                    transform:none;margin:0;margin-bottom:1rem;
                }
                & figure {
                    display:none;
                    & img {
                        display:none;
                    }
                }
            }
            & main {
                & section {
                    &#blog {
                        & .blog {
                            gap:2rem;padding-inline:2rem;
                        }
                    }
                }
            }
        }
    }
    .cursor {
        display:none;
    }
    
}