/* Responsive tablette */
@media (max-width: 600px) {
    /* .offre{
        width: ;
    } */

     nav #burger{
        display: block;
    }

    .outlinks .login{
        display: none;
    }
    .outlinks .subs span{
        display: none;
    }
    nav #links a{
        display: none;
    }
    .about-container {
        flex-direction: column;
        text-align: center;
    }

    .about-image {
        text-align: center;
    }


    .features, #stats { /* Ou l'id du parent qui contient les boxes */
        display: grid;
        /* Crée 2 colonnes de taille égale */
        grid-template-columns: repeat(2, 1fr); 
        gap: 5px; /* Espace entre les boxes */
        padding: 10px;
    }

   
    .feature-box, .stat-box {
        /* On s'assure que les box ne prennent pas toute la largeur */
        width: 100%; 
        /* Optionnel : ajuster la taille du texte pour que ça rentre bien */
        padding: 8px;
        box-sizing: border-box;
    }

     #stats .stat-box{
        text-align: center;
        margin: 5px 0px;
        
    }

    .feature-box h3 {
        font-size: 1.1rem; /* Un peu plus petit pour éviter les retours à la ligne brusques */
    }
    .feature-box p{
        font-size: 12px;
        color: gray;
    }

    .dest-container{
        display: block;
        padding: 10px;
    }
    .dest-box{
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0px;
    }
    .subjects-container {
        gap: 10px;
    }
    .about-image img {
        max-width: 100%;
    }

    .about-text h2 {
        font-size: 28px;
    }

    .about-text p {
        font-size: 16px;
    }

    .subject-box{
        width: 140px;
        padding: 20px 10px;
        margin: 15px 0px;
    }
    .subject-box h3{
        font-size: 16px;
    }

    nav{
        padding: 15px 5%;
        width: 90%;
    }
    nav .outlinks .login{
        font-size: 12px;
    }
    nav .logo{
        margin-left: 40px !important;
        /* background-color: aqua; */
    }
    .footer-container{
        flex-direction: column-reverse;

    }
    .footer-container > div{
        width: 100%;

        box-sizing: border-box;
    }

    #offre-banner div{
        padding: 10px;
        text-align: center;
    }
    .offreimgcontainer{
        display: block;
    }
    .offre{
        display: block;
        box-sizing: border-box;
    }
    .offre img{
        width: 100%;
        display: none;
    }
    .offre-vertnav{
        display: none;
    }
    .offreicone{
        display: block;
    }
    .offre-container{
        display: block;
    }
    .offre-result{
        width: 100%;
        margin: 20px 0px;
        padding: 0px;
    }
}