@media screen and (max-width: 1734px) {
    .main-content {
        max-width: 1300px;
    }
    
}

@media screen and (max-width: 1634px) {
    .main-content {
        max-width: 1200px;
    }
    
}

@media screen and (max-width: 1536px) {
    .title {
        position: inherit;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        left: 0;
    }

    .line {
        width: 100%;
        height: 45px;
    }

    .line::after, .line::before {
        width: 45%;
        height: 2px;
    }

    .line::after {
        left: 0;
        bottom: auto;
    }

    .line::before {
        right: 0;
        top: auto;
    }

    .title h1 {
        writing-mode: horizontal-tb;
    }

    #projets {
        flex-direction: column;
    }
}

@media screen and (max-width: 1182px) {
    .progress-container {
        display: none;
    }
}

@media screen and (max-width: 1122px) {
    .veille-intro h2,
    .veille-sources h3,
    .veille-conclusion h3 {
        font-size: 1em;
        line-height: 5;
    }
}

@media (max-width: 1100px) {
    .hero {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
    .readme-content {
        padding: 25px;
    }    
    .repo-readme h2 {
        font-size: 1.4em;
    }
}

@media screen and (max-width: 800px) {
    .timeline {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }
    .timeline::after {
        /* Masquer la ligne verticale de la timeline en mode responsive */
        display: none;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
        padding: 0;
        margin: 0;
    }
    
    .timeline-item.left {
        left: auto;
        padding: 0;
    }
    
    .timeline-item.right {
        left: auto;
        padding: 0;
    }
    
    .timeline-item.left::after,
    .timeline-item.right::after {
        left: 15px; /* Ajustement plus précis pour l'alignement en mode mobile */
    }
}

@media screen and (max-width: 788px) {
    .ml11 {
        font-size: 1.5em;
    }
}

@media screen and (max-width: 780px) {
    .ml16 {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .comparison-table {
        font-size: 0.8rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 10px 8px;
    }
    
    .comparison-card {
        overflow-x: auto;
        padding: 15px;
        padding-top: 0;
    }
    
    .comparison-card h4 {
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 -15px 15px -15px;
    }
}

@media screen and (max-width: 750px) {
    .inline {
        flex-direction: column;
    }
}

@media screen and (max-width: 696px) {
    .main-content {
        flex-direction: column;
    }

    .readme {
        width: 100%;
    }
}

@media screen and (max-width: 622px) {
    .veille-intro h2,
    .veille-sources h3,
    .veille-conclusion h3 {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 500px) {
    .framework-card {
        width: 250px;
    }
}

@media screen and (max-width: 410px) {
    .ml16 {
        font-size: 0.5em;
    }

    .menu {
        top: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
    }
    
    .theme-container {
        top: 20px;
        left: 20px;
    }
    
    .theme-switch {
        width: 50px;
        height: 25px;
    }
    
    .theme-switch .toggle-ball {
        width: 19px;
        height: 19px;
    }
    
    [data-theme="dark"] .theme-switch .toggle-ball {
        transform: translateX(25px);
    }
}

@media screen and (max-width: 354px) {
    .ml11 {
        font-size: 1em;
    }
}