@media screen and (max-width: 1024px) { /* tablette */
    #canvas,
    #bubble-stack {
        display: none !important;
    }
}

@media screen and (max-width: 1280px) { /* tablette */
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
        gap: 20px;
        width: 100%;
        max-width: 1280px;
        padding: 0 10px;
    }

    .skills-title {
        margin-bottom: 0;
    }

    .skill-header {
        font-size: 1.6em;
    }

    .skill-card p {
        margin-bottom: 5px;
    }
}

@media only screen and (max-width: 768px) { /* mobile */
    :root {
        --header-heigt: 40px;
    }

    body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    body::after {
        content: '';
        display: block;
        height: 1px;
    }

    .logoText {
        font-size: 1.7em;
    }

    .section {
        min-height: initial;
        height: initial;
    }

    /* -------------------------- SECTION 1 -------------------------- */
    #section1{
        min-height: 100vh;
        height: 100vh;
    }

    #section1 .centered-text p.subtitre{
        letter-spacing: 0.34em;
    }

    /* -------------------------- SECTION 2 -------------------------- */
    #section2 .half-height .text {
        font-size: 1.1em;
        padding: 0 20px;
    }

    /* -------------------------- SECTION 3 -------------------------- */
    .skills-title {
        font-size: 1.8em;
        margin-bottom: 0;
    }

    .skills-grid {
        grid-template-columns: 1fr;
        gap: 0;
        font-size: 0.5em;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .skill-header {
        font-size: 2.2em;
    }

    .skill-card p {
        font-size: 1.9em !important;
        margin-bottom: 5px;
        letter-spacing: -2px;
    }

    .skills-container {
        height: auto;
        padding-bottom: 40px;
    }

    /* -------------------------- SECTION 4 -------------------------- */
    .project-description p.description{
        font-size: 0.9em;
    }
}