@import url("./reset.css");
@import url("./variables.css");
@import url("./utils.css");
@import url("./typography.css");
@import url("./nav.css");
@import url("./footer.css");
@import url("./footer.css");
@import url("./team.css");
@import url("./topic.css");
@import url("./contact.css");

html {
    scroll-behavior: smooth;
    font-size: 90%;
}

body {
    background-color: var(--bg-white);
    color: var(--txt-main);
    font-size: var(--step-0);
    padding: 0;
    background-repeat: no-repeat;
}

section,
main,
footer,
nav {
    padding-inline: 1rem;
}

main {
    padding-block-end: var(--space-xl);
}

hr{
    border-color: var(--neutral-50);
    margin-top: var(--space-2xs);
}

.intro{
    padding-block-end: var(--space-m);
}

.intro__text {
    margin-block-end: var(--space-s);
}

.intro__main {
    font-size: var(--step-2);
}

.intro__content{
    font-size: var(--step-1);
    color: var(--txt-secondary);
}

.intro__img {
    width: 100%;
    border-radius: var(--radius-m);
}

.services-list {
    padding-inline-start: var(--space-2xs);
    margin-block-start: var(--space-2xs);
    list-style: circle;

    & > li::marker{
        color: var(--txt-accent-secondary);
    }
}

@media screen and (min-width: 800px) {
    body {
        display: grid;
        grid-template-columns:
            calc(50vw - 680px)
            repeat(8, 1fr)
            calc(50vw - 680px);
        grid-template-rows: auto 1fr auto;
        min-height: 100vh;
        min-height: 100dvb;
        align-items: start;
    }

    body > * {
        grid-column: 2 / 10;
    }

    .intro {
        display: grid;
        grid-template-columns: subgrid;
    }
    
    .intro__content{
        font-size: var(--step-0)
    }
    
    .intro__main{
        font-size: var(--step-2);
    }
    
    .intro__main, .intro__content{
        grid-column: 2 / 8;
        margin-block-end: var(--space-xs);
        margin-block-start: 0;
    }
    
    .intro__values{
        margin: 0;
        grid-column: 3 / 7;
        align-self: end;
        border-radius: var(--radius-m)
    }

    .intro__img-container {
        position: relative;
        grid-column: 2 / -2;
        margin-block-end: var(--space-s)
    }

    .intro__img {
        max-height: 600px;
        object-fit: cover;
        box-shadow: var(--shadow-elevation-medium);
    }

    main.container {
        display: grid;
        grid-template-columns: subgrid;

        & > * {
            grid-column: 3 / 7;
        }
        
        &.honoraires{
            text-align: justify;
        }
    }
    
    .services__img{
        grid-column: 3 / 9;
        object-fit: cover;
        width: 100%;
        margin-top: calc(-1 * var(--space-m));
        margin-bottom: var(--space-s);
        border-radius: var(--radius-m);
    }
}
 
@media screen and (min-width: 1400px) {
    body {
        padding: 0;
    }
}