.page.projet{
    justify-content: flex-start;
    align-items: center;
}

    .page.projet > main{
        align-items: center;
        padding: 100px 0;
        max-width: 720px;
    }
    
    .page.projet .subtitle{
        margin: 10px 0 20px 0;
    }
    
    .page.projet .subtitle.variant{
        align-self: flex-start;
        margin: 30px 0 10px 5%;
    }

        .page.projet .subtitle.variant p{
            font-weight: var(--regular);
        }

    .page.projet header{
        user-select: none;
        position: sticky;
        top: -5px;
        z-index: 2;

        width: 90%;
        height: 84px;
        margin-bottom: 70px;

        border-radius: 5px;
        background-color: var(--color-0);

        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .page.projet header h3{
            cursor: pointer;

            font-family: var(--philosopher);
            font-weight: var(--bold);
            font-size: 2.4rem;
            text-align: center;
            color: var(--color-1);

            width: 50%;
            height: 84px;
            line-height: 84px;
            flex: 1 1 auto;

            position: relative;
            z-index: 1;

            transition: color 300ms ease;
        }

        .page.projet header .one{
            color: var(--color-0);
        }

        .page.projet header.s .one{
            color: var(--color-1);
        }

        .page.projet header.s .two{
            color: var(--color-0);
        }

        .page.projet header > div{
            position: absolute;
            top: 15px;
            left: 15px;
            z-index: 0;

            width: calc(50% - 30px);
            height: 54px;

            border-radius: 5px;
            background-color: var(--color-main);

            transition: left 300ms ease;
        }

        .page.projet header.s > div{
            left: calc(50% + 15px);
        }

        .page.projet .p{
            width: 90%;
            text-align: justify;
            margin: 10px 0;
            /* text-indent: 40px; */
        }

            .page.projet .p span{
                background-image: linear-gradient(to top, var(--color-main) 7px, transparent 7px);
                font-weight: var(--regular);
            }

        .page.projet .p.u{
            text-indent: 0px;
        }

        .page.projet .img{
            width: 100%;
            margin: 20px 0;
            overflow: hidden;

            display: flex;
            align-items: center;
            justify-content: center; 
        }
        
        .page.projet .img.logo{
            width: 200px;
            margin: 20px 0 30px 0;
        }

        .page.projet img{
            flex: none;
            width: 100%;
            border-radius: 5px;
        }

        .page.projet .button-next{
            margin-top: 70px;
        }

/* media */

@media screen and (max-width: 1020px) {

    .page.projet header{
        width: 100%;
        margin: 0;
        position: fixed;
        top: unset;
        bottom: 0;
        left: 0;

        height: 74px;

        border-radius: 0;
    }

    .page.projet header > h3{
        font-size: 2.2rem;
        height: 74px;
        line-height: 74px;
    }

    .page.projet header > div{
        height: 44px;
    }

    .page.projet > main{
        width: 100%;
        max-width: 400px;
    }

    .page.projet .subtitle.variant{
        margin-left: 10%;
        margin-bottom: 0;
    }

    .page.projet .p{
        width: 80%;
    }

    .page.projet img{
        width: 160%;
        position: relative;
        border-radius: 0;
        /* transform: scale(2); */
        z-index: 0;
    }

    .page.projet .logo img{
        width: 100%;
    }

    .page.projet .button-next{
        margin: 20px 0 10px 0;
    }

}