/* Layout */

.page {
    color: white;
    display: grid;
}

    .page-header {
        align-self: end;
        grid-row: 1;
    }

    .page-searchbar {
        align-self: flex-start;
        box-sizing: border-box;
        grid-row: 2;
    }

        .page-searchbar-input {
            background-color: white;
            border: none;
            border-radius: 5px;
            box-sizing: inherit;
            color: var(--gris-fonce);
            font-family: inherit;
            font-size: inherit;
            height: 3rem;
            padding: .5rem 1rem;
            transition: background-color var(--animation-duration), color var(--animation-duration);
            width: 100%;
        }

            .page-searchbar-input.is-empty {
                background-color: var(--gris-transparent);
                color: white;
            }

            .page-searchbar-input.is-empty::placeholder {
                color: white;
                opacity: 1;
            }

        .page-searchbar-results {
            padding-left: 0;
            width: 100%;
        }

        .page-searchbar-result {
            background-color: rgba(255, 255, 255, .8);
            color: var(--gris-fonce);
            font-size: 1.15rem;
            list-style: none;
            padding: 1rem;
            transition: background-color var(--animation-duration), transform var(--animation-duration);
        }

            .page-searchbar-result:first-child {
                border-top-left-radius: 5px;
                border-top-right-radius: 5px;
            }

            .page-searchbar-result:last-child {
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }

            .page-searchbar-result:not(:last-child),
            .page-searchbar-result:not(:hover) {
                border-bottom: 1px solid var(--gris-clair);
            }

            .page-searchbar-result:hover {
                background-color: white;
                border-radius: 5px;
                color: var(--bleu-de-france);
                transform: scale(1.05);
            }

            .page-searchbar-result:active {
                background-color: var(--cyan);
                color: white;
                font-weight: bold;
            }

            .page-searchbar-result a {
                display: block;
                text-decoration: none;
                width: 100%;
            }

            .page-searchbar-result-url {
                opacity: .6;
            }

    .page-footer {
        align-items: center;
        align-self: end;
        background-color: var(--gris-transparent);
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        grid-row: 3;
        height: 3rem;
        padding: 1rem;
    }

        .page-footer-links {
            display: flex;
            padding-left: 0;
        }

            .page-footer-links li {
                list-style-type: none;
            }

            .page-footer-links li:not(:last-of-type) {
                margin-right: 1rem;
            }

            .page-footer-links a {
                transition: color var(--animation-duration);
            }
            
            .page-footer-links a:hover {
                color: var(--bleu-de-france);
            }

/* Sélecteurs groupés */

.page-header-title,
.page-header-subtitle,
.page-header-aside {
    margin: 0;
}