/* responsive-mobile.css */

/* Styles pour les écrans de largeur maximale de 480px (petits smartphones) */
@media (max-width: 480px) {
    body {
        font-size: 14px; /* Réduire la taille de la police de base */
        line-height: 1.4; /* Réduire l'interligne */
    }

    header {
        flex-direction: column; /* Empiler les éléments de l'en-tête */
        align-items: center;
        padding: 10px 15px;
    }

    header h1 {
        font-size: 18px; /* Réduire la taille du titre */
        margin-bottom: 5px;
        text-align: center;
    }

    nav {
        flex-direction: column; /* Empiler les liens de navigation */
        align-items: stretch; /* Étirer les liens sur toute la largeur */
    }

    nav a {
        padding: 8px 12px;
        margin-bottom: 5px;
        text-align: center;
        display: block; /* Chaque lien sur une nouvelle ligne */
        border-radius: 4px;
    }

    .container {
        margin: 10px;
        padding: 15px;
        border-radius: 6px;
    }

    .dashboard {
        grid-template-columns: 1fr; /* Une seule colonne sur les petits écrans */
        gap: 10px;
    }

    .card {
        padding: 10px;
        border-radius: 4px;
    }

    .sidebar {
        width: 100%; /* La barre latérale prend toute la largeur */
        float: none;
        margin-bottom: 15px;
    }

    .category-list {
        display: flex;
        overflow-x: auto; /* Permettre le défilement horizontal des catégories */
    }

    .category-list li {
        margin-right: 10px;
    }

    .search-box input {
        width: 100%;
        padding: 8px;
        border-radius: 4px;
    }

    .size {
        font-size: 20px;
    }

    .btn {
        padding: 8px 12px;
        font-size: 0.9em;
        border-radius: 3px;
    }

    .document-table thead {
        display: none; /* Masquer l'en-tête du tableau sur les petits écrans */
    }

    .document-table tr {
        display: block;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .document-table td {
        display: block;
        border: none;
        padding-left: 10px;
        position: relative;
        padding-bottom: 8px;
    }

    .document-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 6px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.8em;
        color: #777;
    }

    .document-table td:last-child {
        padding-bottom: 15px;
    }

    .access-form {
        display: block;
        margin-bottom: 10px;
    }

    .access-form input[type="password"], .access-form button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
        box-sizing: border-box;
    }
}

/* Styles spécifiques pour les écrans entre 320px et 375px (petits iPhones) */
@media (max-width: 375px) {
    body {
        font-size: 13px; /* Ajuster encore plus la taille de la police si nécessaire */
    }

    header h1 {
        font-size: 16px;
    }

    .size {
        font-size: 18px;
    }
    /* Vous pouvez ajouter d'autres ajustements spécifiques ici */
}

/* Vous pouvez ajouter d'autres Media Queries pour des tailles spécifiques si besoin */