/* Responsive commun du header et du footer, aligné sur la page Ajouter un lieu. */
@media (max-width: 900px) {
    .burger {
        display: block;
    }

    header nav {
        display: none;
        position: absolute;
        top: 120px;
        right: 30px;
        padding: 25px;
        border: 1px solid #333;
        border-radius: 20px;
        background: #111;
        flex-direction: column;
        gap: 20px;
    }

    header nav.active {
        display: flex;
    }

    .header-social {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .header-social img {
        width: 28px;
        height: 28px;
    }

    .footer {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 30px 25px;
        text-align: center;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-logo,
    .footer-socials {
        justify-content: center;
    }

    .footer-brand p {
        text-align: center;
    }

    .footer-column {
        align-items: center;
    }

    .newsletter {
        display: flex;
        width: 100%;
        max-width: 300px;
        margin: 20px auto 0;
        border-radius: 12px;
        background: #111;
        overflow: hidden;
    }

    .newsletter input {
        flex: 1;
        min-width: 0;
        padding: 15px;
        border: 0;
        background: transparent;
        color: #fff;
    }

    .newsletter button {
        flex: 0 0 auto;
        padding: 0 20px;
        background: var(--green);
        color: #000;
    }
}

@media (max-width: 560px) {
    header {
        width: 100%;
        padding: 22px 5%;
        gap: 18px;
    }

    header .logo {
        flex: 1 1 calc(100% - 64px);
        min-width: 0;
        gap: 10px;
    }

    header .logo-img {
        flex: 0 0 auto;
        width: 82px;
    }

    header .logo-text {
        min-width: 0;
        margin-top: 0;
    }

    header .brand-name {
        width: auto !important;
        font-size: 25px !important;
    }

    header .logo p:not(.brand-name) {
        width: auto;
        max-width: 100%;
        margin-top: 4px;
        font-size: 11px;
    }

    .header-social,
    .header-buttons {
        flex: 1 1 100%;
        justify-content: center;
    }

    .footer {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }
}