/* ==========================================================================
   CHARTE GRAPHIQUE MOBILE (Dédiée aux Smartphones < 768px)
   Raccordée à style.css
   ========================================================================== */

@media screen and (max-width: 768px) {
    
    /* 1. Ajustements de la structure globale sur mobile */
    .container {
        padding: 1rem 0.75rem; /* Un peu moins d'espace sur les bords des petits écrans */
    }
    
    h1 {
        font-size: 1.5rem; /* Titre principal un peu plus petit sur mobile */
    }
    
    h2 {
        font-size: 1.25rem;
    }

    /* 2. Style des formulaires sur mobile */
    form {
        padding: 1.25rem 1rem; /* On réduit légèrement les marges internes du bloc blanc */
    }

    form input[type="text"],
    form input[type="number"],
    form select,
    form textarea {
        font-size: 16px; /* CRUCIAL : Évite que l'iPhone ne zoome tout seul dans le champ */
        padding: 10px 12px;
    }

    /* Le bouton submit prend toute la largeur sur mobile pour être cliqué facilement au pouce */
    .submit, .btn-action {
        width: 100%;
        padding: 14px;
    }

    /* ==========================================================================
       MENU HAMBURGER ULTRA-MODERNE (Bleu Marine & Orange)
       ========================================================================== */
    header {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
    }

    .connexion {
        width: auto;
        text-align: center;
    }

    /* Icône Hamburger (les 3 barres) */
    .hamburger {
        display: block;
        cursor: pointer;
        z-index: 100;
    }

    .hamburger .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background-color: #ffffff; /* Barres blanches sur le fond bleu marine */
        border-radius: 2px;
    }

    /* Animation des barres en "X" quand le menu est ouvert */
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
        background-color: var(--accent); /* Devient orange pour indiquer la fermeture */
    }
    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
        background-color: var(--accent);
    }

    /* Le menu de navigation masqué qui descend en rideau */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 50%;
        background-color: var(--primary); /* Même bleu marine institutionnel */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        max-height: 0; /* Masqué par défaut */
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        z-index: 99;
    }

    /* Quand on clique sur le bouton, le menu se déploie */
    .nav-menu.active {
        max-height: 500px; /* Hauteur maximale du déploiement */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem 0;
    }

    .nav-menu ul {
        flex-direction: column; /* Les liens s'empilent verticalement */
        width: 100%;
        gap: 0;
    }

    .nav-menu li {
        width: 100%;
    }

    /* Liens du menu sur Mobile */
    .nav-menu a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 0;
        color: #e2e8f0;
    }

    .nav-menu a:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    /* Onglet actif sur Mobile */
    .nav-menu a.active {
        background-color: var(--accent-light);
        color: var(--accent) !important; /* Texte orange sur fond clair pour le menu mobile */
        border-left: 4px solid var(--accent); /* Petite barre orange originale sur le côté */
        box-shadow: none;
    }

    /* ==========================================================================
       TRANSFORMATION DU TABLEAU EN "CARTES" (Rubrique Gérer)
       ========================================================================== */
    table, thead, tbody, th, td, tr { 
        /*display: block; */

    }
    
    /* On cache proprement l'en-tête du tableau d'origine */
    table thead {
       /* position: absolute;
        top: -9999px;
        left: -9999px;*/
    }
    
    table {
        width: 50% !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Chaque ligne de colis devient une carte blanche stylisée */
    table tr { 
        background: var(--bg-card);
        border: 1px solid #e2e8f0;
        border-radius: var(--radius);
        /*padding: 0 1.25rem;
        margin-bottom: 1.25rem;*/
        box-shadow: var(--shadow);
    }
    
    /* Configuration des cellules pour accueillir les étiquettes à gauche */
    table td { 
        border-bottom: 1px solid #f1f5f9;
        /*position: relative;*/
        padding: 10px 0 10px 0 !important; /* Laisse l'espace pour l'intitulé */
        text-align: center;
        color: var(--text-dark);
        font-size: 15px;
    }