/* =========================
   TABLETTE
========================= */

@media (max-width: 1024px) {

    .sidebar {
        width: 220px;
        min-width: 220px;
    }

    .block {
        flex: 1 1 calc(48% - 10px);
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    main {
        flex-direction: column;
    }

    .sidebar {
        display: none;
    }

    .row {
        width: 100%;
    }

    .block {
        flex: 1 1 100%;
        margin: 10px 0;
    }

    footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .header-center h1 {
        font-size: 20px;
    }
}

/* =========================
   PETITS MOBILES
========================= */

@media (max-width: 480px) {

    body {
        font-size: 14px;
    }

    .header-left .logo {
        height: 70px;
    }

    .block {
        padding: 15px;
    }
}