@media (max-width: 480px) {
    a.cta-button,
    button.cta-button {
        width: 100%;
    }

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }

    td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    a.cta-button,
    button.cta-button {
        width: 100%;
        padding: 12px 18px;
        font-size: 1em;
    }

    main {
        padding: 10px;
    }

    table {
        font-size: 0.9em;
    }

    th,
    td {
        padding: 8px;
    }

    img {
        width: 100%;
    }

    h1 {
        font-size: 34px;
        line-height: 36px;
        margin-top: 0;
        margin-bottom: 12px;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    #faqAccordion,
    .avis,
    table,
    .meilleursOutils-div,
    .content-text,
    tbody,
    .avantages {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hero-section {
        min-height: auto;
        margin-bottom: 0 !important;
        padding: 88px 0 18px;
    }

    .hero-left p {
        display: none;
    }

    .tools-name-rounded {
        display: none;
    }

    .quicklist {
        gap: 10px;
    }

    .pickcard {
        padding: 10px;
    }

    .pickhead {
        margin-bottom: 8px;
        gap: 8px;
    }

    .pickrank {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .picktag {
        min-height: 24px;
        padding: 4px 8px;
        font-size: 13px;
    }

    .pickscore {
        font-size: 20px;
    }

    .pickbody {
        gap: 10px;
    }

    .pickbody img {
        width: 70px;
        height: 56px;
        flex-basis: 70px;
    }

    .pickbody h2 {
        font-size: 20px;
        line-height: 23px;
    }

    .pickbody p,
    .pickbody ul {
        display: none;
    }

    .pickaction {
        min-height: 38px;
        margin-top: 9px;
        font-size: 15px;
    }

    .hero-section+.container {
        margin-top: 0px !important;
    }

    .img-container img {
        width: 100%;
        height: auto;
    }

    .container,
    .container-sm {
        max-width: 100% !important;
    }
}

@media (min-width: 769px) and (max-width: 1222px) {
    main {
        padding: 10px;
    }

    table {
        font-size: 0.9em;
    }

    th,
    td {
        padding: 8px;
    }

    img {
        width: 100%;
    }

    h1 {
        font-size: 42px;
        line-height: 44px;
        margin-top: 0;
    }

    h2 {
        font-size: 1.3em;
    }

    h3 {
        font-size: 1.1em;
    }

    #faqAccordion,
    .avis,
    table,
    .meilleursOutils-div,
    .content-text,
    tbody,
    .avantages {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .hero-section {
        min-height: auto;
        margin-bottom: 0 !important;
        padding-top: 92px;
        padding-bottom: 34px;
    }

    .pickbody img {
        width: 96px;
        height: 72px;
        flex-basis: 96px;
    }

    .hero-section+.container {
        margin-top: 0px !important;
    }

    .img-container img {
        width: 100%;
        height: auto;
    }

    .container,
    .container-sm {
        max-width: 100% !important;
    }
}