body {
    height: auto;
}

header {
    mix-blend-mode: normal;

    >* {
        color: black;

        li {
            color: black;

            a {
                color: black;
            }
        }
    }

    label {
        display: none;
    }
}

main {
    margin: var(--body-margin);
    display: grid;
    grid-template-columns: repeat(12, 1fr);


    min-height: calc(100vh - 2 * var(--body-margin));
    /* le conteneur prend toute la hauteur de la page */

    grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
    /* ajouter 1fr pour pousser la 3e ligne au milieu */

    a {
        color: inherit;
        text-decoration: none;
    }

    section.informations {
        grid-column: 7/-1;
        grid-row: 1;
        margin-bottom: 1rem;
    }

    section.references {
        grid-column: 9/-1;
        grid-row: 2;
    }

    section.middle {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-column: 1/ -1;
        grid-row: 4;
        gap: 1rem;

        section.details {
            grid-column: 1/ span 2;
        }

        section.contacts {
            grid-column: 4/ span 2;
            display: flex;
            flex-direction: column;
        }

        section.tags {
            grid-column: 7 / span 4;
        }

        section.address {
            grid-column: 11 / span 2;
            display: flex;
            flex-direction: column;
        }
    }

    section.lang {
        grid-column: 7 / span 2;
        grid-row: 8;
        align-self: end;
    }

    section.credits {
        grid-column: 9 / span 3;
        grid-row: 8;
        align-self: end;

    }
}


@media (width < 968px) {

    main {
        margin: var(--body-margin);
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1rem;
        height: calc(100svh - 2 * var(--body-margin));

        /* le conteneur prend toute la hauteur de la page */

        grid-template-rows: auto 1fr 1fr 1fr 1fr 1fr;
        /* ajouter 1fr pour pousser la 3e ligne au milieu */

        section.informations {
            grid-column: 1/-1;
            grid-row: 1;
        }

        section.references {
            grid-column: 3/-1;
            grid-row: 2;
        }

        section.middle {
            display: grid;
            grid-template-columns: repeat(1, 1fr);

            grid-row: 4;
            grid-template-rows: auto 1fr;
            gap: 1rem;
            grid-column: 3 / -1;

            section.details {
                grid-column: 1/ span 3;
            }

            section.contacts {
                grid-column: 1 / -1;
                display: flex;
                flex-direction: column;

            }

            section.tags {
                grid-column: 7 / span 4;
                display: none;
            }

            section.address {
                grid-column: 1 / -1;
                display: flex;
                grid-row: 3;
                flex-direction: column;
            }
        }

        section.lang {
            grid-column: 3 / -1;
            grid-row: 6;
            align-self: end;
            text-align: right;
            text-align: right;
            right: var(--body-margin);
        }

        section.credits {
            grid-column: 3 / -1;
            grid-row: 3;
            align-self: start;
            display: none;

        }
    }

}