@font-face {
    font-family: "Syne";
    src: url("./fonts/Syne-Regular.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Syne";
    src: url("./fonts/Syne-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Syne";
    src: url("./fonts/Syne-SemiBold.woff2") format("woff2");
    font-weight: 600;
}

@font-face {
    font-family: "Syne";
    src: url("./fonts/Syne-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Paysage";
    src: url("./fonts/Paysage-Regular.woff") format("woff"),
    url("./fonts/Paysage-Regular.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: "Paysage";
    src: url("./fonts/Paysage-Bold.woff") format("woff"),
    url("./fonts/Paysage-Bold.woff2") format("woff2");
    font-weight: 700;
}


:root{
    --color-magenta: #F10D7E;
    --color-violet: #5500FF;
    --color-black : #2A2A2A;
    --between-sections-margin: clamp(90px, calc(76.84px + 3.289vw), 140px);
    --title-font-size: clamp(30px, calc(18.16px + 2.961vw), 75px);
    --title-margin: calc(3.167 * var(--title-font-size));
    --bubble-size: clamp(154px, calc(135.32px + 4.671vw), 245px);
    --doodle-gap: clamp(27px, calc(23.58px + 0.855vw), 40px);
}

header{
    margin-bottom: calc(var(--between-sections-margin) * 2);
}

body{
    margin: 0;
    padding-top: 110px;
}

header, main, footer{
        font-family: Syne;
}

footer{
    margin-bottom: calc(var(--between-sections-margin) / 2);
}

small{
    font-size: 1rem;
}

small a{
    color:inherit;
}

nav{
    font-family: Paysage;
}

.centered{
    width:76%;
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
}

.full-right{
    width:88%;
    margin-left: max(12%, calc((100% - 1500px) / 2));
}

.margin-right-12{
    margin-right:12%;
}

header{
    color: var(--color-black);
}

/* ---- Navbar intersite ---- */
#top-nav{
    position:fixed;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    width:100%;
    z-index:100;
}

.nav-pill{
    position:relative;
    display:flex;
    align-items:stretch;
    background-color: var(--color-black);
    border-radius:999px;
    padding-block:5px;
    padding-inline:min(0.52vw, 10.26px);
    font-family: Paysage;
}

.nav-highlight{
    position:absolute;
    background-color:white;
    border-radius:999px;
    z-index:0;
    transition: left 0.25s ease, width 0.25s ease, top 0.25s ease, height 0.25s ease;
    pointer-events:none;
}

.nav-side{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:12px;
    padding-inline:min(1.768vw, 34.9px);
    color:white;
    text-decoration:none;
    transition: color 0.25s ease;
}

.nav-side-title{
    font-weight:700;
    font-size: clamp(18px, calc(16.95px + 0.263vw), 22px);
    margin:0;
}

.nav-side-subtitle{
    font-weight:normal;
    font-size:16px;
    margin:4px 0 0;
}

.nav-center{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:min(0.624vw, 12.32px);
    color: var(--color-black);
    padding-block:0;
    padding-inline:min(1.352vw, 26.69px);
    font-weight:700;
    font-size: clamp(16px, calc(14.95px + 0.263vw), 20px);
    line-height:1.15;
    text-align:center;
    white-space:nowrap;
    transition: color 0.25s ease;
}

.nav-pill.hover-left .nav-side:first-child{
    color: var(--color-black);
}

.nav-pill.hover-right .nav-side:last-child{
    color: var(--color-black);
}

.nav-pill.hover-left .nav-center,
.nav-pill.hover-right .nav-center{
    color:white;
}

.nav-arrow{
    width:min(2vw, 30px);
    height:auto;
    flex-shrink:0;
}

.nav-arrow-left{
    transform: scale(-1, -1);
    rotate: 10deg;
}

.nav-arrow-right{
    transform: scale(1, -1);
    rotate: -10deg;
}


.section-title{
    position:relative;
    font-size: var(--title-font-size);
}

#section-methodo .section-title{
    rotate: -5deg;
    height: calc(var(--title-font-size) + var(--doodle-gap));
}

#section-presentation{
    margin-bottom: calc(var(--between-sections-margin) * 2);
}

#section-methodo{
    margin-bottom : calc(var(--between-sections-margin) * 1.2)
}

#section-methodo h1{
    rotate: 0deg;
}

.doodle-arc{
    position:absolute;
    height:auto;
    pointer-events:none;
}

#header-arc{
    --w: clamp(164px, calc(96.11px + 16.974vw), 422px);
    width: var(--w);
    position:relative;
    margin-top: 2vw;
    left: 5.269em;
}

#pratiques-arc{
    --w: clamp(263px, calc(159.58px + 25.855vw), 656px);
    width: var(--w);
    position:relative;
    margin-top: clamp(21.6px, calc(13.29px + 2.308vw), 57.6px);
    left:0;
}

.doodle-group{
    position:absolute;
    height:auto;
    pointer-events:none;
}

#methodo-group{
    --w: clamp(232px, calc(150.42px + 20.395vw), 542px);
    width: var(--w);
    bottom: calc(-0.06999 * var(--w));
    left: 5.133em;
}

#presentation-group{
    --w: clamp(161px, calc(97.84px + 18.789vw), 401px);
    width: var(--w);
    bottom: calc(-0.36006 * var(--w));
    left: 6.187em;
}

#contact-group{
    --w: clamp(200px, calc(117.11px + 20.724vw), 515px);
    width: var(--w);
    bottom: calc(-0.04199 * var(--w));
    left: 3.48em;
}

h1{
    font-weight: 700;
    font-size: var(--title-font-size);
    rotate: -5deg;
    margin-bottom:0;
    color: var(--color-black);
}

#subtitle{
    font-weight: 600;
    font-size: clamp(23px, calc(13.26px + 2.434vw), 60px);
    rotate: -5deg;
    margin-top:0;
    margin-bottom:0;
}

.large-text{
    font-weight:600;
    font-size:min(2.08vw, 41.05px);
    line-height:1.525;
    color: var(--color-black);
}

#introduction{
    margin-bottom: var(--between-sections-margin);
}

section{
    margin-bottom: var(--between-sections-margin);
}

#pratiques-title{
    max-width: 1500px;
}

#presentation-title{
    margin-bottom: var(--title-margin);
    rotate: -5deg;
    height: calc(var(--title-font-size) + var(--doodle-gap));
}

#presentation-title h1{
    rotate: 0deg;
}

#contact-title{
    margin-bottom: var(--title-margin);
    rotate: -5deg;
    height: calc(var(--title-font-size) + var(--doodle-gap));
}

#contact-title h1{
    rotate: 0deg;
}

.flex-row{
    display:flex;
    flex-direction: row;
}

.column-2{
    gap: min(4.888vw, 96.48px);
}

.medium-text{
    font-size: clamp(18px, calc(14.32px + 0.921vw), 32px);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1.51;
}

.article-subtitle{
    font-size: clamp(19px, calc(14.53px + 1.118vw), 36px);
    font-family: Paysage;
    font-weight:700;
    margin-top:0;
}

.article-desc{
    font-size: clamp(16px, calc(12.32px + 0.921vw), 30px);
    color: var(--color-black);
    font-weight:normal;
    font-family: Paysage;
}

#wakup-subtitle{
    color: var(--color-magenta);
}

#wesauvage-subtitle{
    color: var(--color-violet);
}

.activity-title{
    margin-bottom:0;
}

.activity-left{
    flex : 0.35;
    min-width: 0;
    display:flex;
    align-items: center;
}

.activity-desc{
    min-width: 0;
    text-align: center;
}

.activity-desc h2{
    width: clamp(229px, calc(175.58px + 13.355vw), 432px);
    max-width: 100%;
    margin: 0 auto;
}

.activity-image{
        width:100%;
        height:100%;
    object-fit:cover;
}

.activity-link{
    flex: 0.25;
    display:flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    cursor: pointer;
}

.activities{
    gap: 7.592vw;
    height: clamp(500px, calc(380px + 15.625vw), 680px);
}

.activity-link-circle{
    --circle-size: clamp(80px, calc(57.37px + 5.658vw), 166px);
    width: var(--circle-size);
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    border-radius:50%;
    padding: calc(var(--circle-size) * 0.25);
}

.activity-link.wakup:hover .activity-link-circle{
    background-color: var(--color-magenta);
}

.activity-link.wesauvage:hover .activity-link-circle{
    background-color: var(--color-violet);
}

.activity-image-box{
    flex: 0.4;
    position:relative;
    aspect-ratio: 1/1;
    min-width: 318px;
}

.ul-svg-item{
    width: min(18vw, 245px);
    position:absolute;
    display:flex;
    align-items:center;
    justify-content: center;
    transition: transform 0.2s ease-out;
}

.no-decorative{
    list-style: none;
}

#methodo-ul{
    height:830px;
    position:relative;
    width:100%;
    margin-top: calc(var(--title-margin) / 2);
    margin-bottom: var(--between-sections-margin);
}

.header-image{
    width:100%;
}

.li-svg-label{
    color:white;
    font-weight: 700;
    text-align: center;
    margin:0;
    position:absolute;
    width:80%;
    overflow-wrap: break-word;
    font-size: clamp(14px, 1.690vw, 23px);
}

.ul-svg-item:nth-child(1){
    top:114px;
    left:5%;
}

.ul-svg-item:nth-child(2){
    top: 295px;
    left:23%;
}

.ul-svg-item:nth-child(3){
    top: 100px;
    left:35%;
}

.ul-svg-item:nth-child(4){
    top: -40px;
    left:65%;
}

.ul-svg-item:nth-child(5){
    top: clamp(175px, calc(139.67px + 4.601vw), 228px);
    left:62%;
}

.ul-svg-item:nth-child(6){
    top: clamp(286px, calc(426px - 7.292vw), 370px);
    left:82%;
}

.ul-svg-item:nth-child(7){
    top: 500px;
    left:55%;
}

.ul-svg-item:nth-child(8){
    top: 520px;
    left:16%;
}

.ul-svg-item:nth-child(9){
    top: clamp(611px, calc(734.33px - 6.424vw), 685px);
    left:35%;
}

.ul-svg-item:nth-child(10){
    top: 670px;
    left:0%;
}


.activity-image-filter{
    position:absolute;
    width:100%;
    height:100%;
    mix-blend-mode:color;
    z-index:99;
}

.img-ratio11{
    aspect-ratio: 1/1;
    width:100%;
    flex: 1;
    position:relative;
}

#presentation-text{
    flex:1;
    margin:0;
}

.img-ratio11 img{
    object-fit: cover;
    width:100%;
    height:100%;
}

.bg-magenta{
    background-color: var(--color-magenta);
}

.bg-violet{
    background: var(--color-violet);
}

footer h1{
    margin-bottom: var(--between-sections-margin);
}

#section-pratiques{
    margin-bottom: calc(var(--between-sections-margin) * 2)
}

footer{
    margin-top: var(--between-sections-margin);
}

#socials{
    display: flex;
    flex-direction: row;
    height:63px;
    margin-bottom: var(--between-sections-margin);
}

#socials a{
    height:100%;
}

.nav-mobile{
    display:none;
}

/*MENTIONS LEGALES*/

.legal-return-wrap{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:100;
    display:flex;
    justify-content:center;
    padding-top: clamp(24px, calc(18.42px + 1.842vw), 40px);
    box-sizing:border-box;
}

.legal-return-button{
    background-color: var(--color-black);
    color:white;
    font-family:Paysage;
    font-weight:700;
    font-size: clamp(16px, calc(14.11px + 0.789vw), 20px);
    text-decoration:none;
    border-radius:999px;
    padding: 16px 34px;
    white-space:nowrap;
            top:0;
    position:fixed;
}

.legal-main{
    margin-bottom: var(--between-sections-margin);
}

#legal-title{
    margin-bottom: var(--title-margin);
}

.legal-block + .legal-block{
    margin-top: clamp(28px, calc(22.63px + 2.237vw), 48px);
}

.legal-heading{
    font-size: clamp(20px, calc(16.32px + 1.579vw), 32px);
    font-weight:600;
    margin: 0 0 12px;
}

.legal-text{
    font-size: clamp(16px, calc(13.68px + 0.987vw), 22px);
    font-weight:normal;
    line-height:1.5;
    margin:0;
}

/* ==========================================================================
   Adaptation mobile 
   ========================================================================== */
@media (max-width: 768px){

    body{
        padding-top:56px;
    }

    .centered,
    .full-right{
        width:84%;
        max-width:100%;
        margin-left:auto;
        margin-right:auto;
    }

    .margin-right-12{
        margin-right:0;
    }

    #top-nav{
        justify-content:flex-end;
        padding-top:12px;
        padding-right:16px;
        box-sizing:border-box;
    }

    .nav-pill{
        display:none;
    }

    .nav-mobile{
        display:block;
        position:relative;
    }

    .nav-mobile-toggle{
        width:137px;
        background-color: var(--color-black);
        color:white;
        border:none;
        border-radius:999px;
        padding:10px 20px;
        box-sizing:border-box;
        font-family:Paysage;
        font-weight:700;
        font-size:14px;
        cursor:pointer;
    }

    .nav-mobile-menu{
        position:absolute;
        top:calc(100% + 8px);
        right:0;
        z-index:101;
        flex-direction:column;
        gap:14px;
        width:217px;
        box-sizing:border-box;
        background-color: var(--color-black);
        border-radius:18px;
        padding:16px 20px;
    }

    .nav-mobile-menu:not([hidden]){
        display:flex;
    }

    .nav-mobile-link{
        color:white;
        text-decoration:none;
    }

    .large-text{
        font-size: clamp(18px, 4vw, 25px);
        line-height:1.5;
    }

    .medium-text, #presentation-text{
        margin-bottom: calc(var(--between-sections-margin) / 2);
    }

    #header-arc{
        left: 3.433em;
    }

    #pratiques-arc{
        left: 0.333em;
    }

    #methodo-group{
        left: 2.4em;
    }

    #presentation-group{
        left: 4.633em;
    }

    #contact-group{
        left: 3.633em;
    }

    #methodo-ul{
        --methodo-gap: 0px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap: var(--methodo-gap);
        height:auto;
        width:auto;
        max-width: calc(var(--bubble-size) * 2 + var(--methodo-gap));
        margin: var(--title-margin) auto var(--between-sections-margin);
        padding:0;
    }

    .ul-svg-item{
        position:relative;
        width: var(--bubble-size);
    }

    .li-svg-label{
        font-size: clamp(16px, calc(14.16px + 0.461vw), 23px);
    }

    .ul-svg-item:nth-child(1){
        top:0; left:auto;
        order:1;
        align-self:flex-start;
    }

    .ul-svg-item:nth-child(2){
        top:0; left:auto;
        order:2;
        align-self:flex-end;
    }

    .ul-svg-item:nth-child(3){
        top:0; left:auto;
        order:5;
        align-self:flex-start;
    }

    .ul-svg-item:nth-child(4){
        top:0; left:auto;
        order:7;
        align-self:flex-start;
    }

    .ul-svg-item:nth-child(5){
        top:0; left:auto;
        order:10;
        align-self:flex-end;
    }

    .ul-svg-item:nth-child(6){
        top:0; left:auto;
        order:6;
        align-self:flex-end;
    }

    .ul-svg-item:nth-child(7){
        top:0; left:auto;
        order:9;
        align-self:flex-start;
    }

    .ul-svg-item:nth-child(8){
        top:0; left:auto;
        order:3;
        align-self:flex-start;
    }

    .ul-svg-item:nth-child(9){
        top:0; left:auto;
        order:8;
        align-self:flex-end;
    }

    .ul-svg-item:nth-child(10){
        top:0; left:auto;
        order:4;
        align-self:flex-end;
    }

    .flex-row{
        flex-direction:column;
    }

    .column-2{
        gap:28px;
    }

    .activities{
        gap:32px;
        align-items:center;
    }

    .activity-left{
        flex:none;
        width:100%;
        order:2;
    }

    .activity-link{
        flex:none;
        order:3;
    }

    .activity-image-box{
        flex:none;
        width:100%;
        height:0;
        padding-bottom:60%;
        aspect-ratio: 5/3;
        order:1;
    }

    .activity-image{
        position:absolute;
        top:0;
        left:0;
    }

    .activity + .activity{
        margin-top: 140px;
    }

    .img-ratio11{
        order:2;
        aspect-ratio: 3/2;
    }

    #presentation-text{
        order:1;
    }

    .legal-return-wrap{
        padding-top:16px;
    }

    .legal-return-button{
        padding: 12px 26px;
    }
}