/* ==========================================================================
   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;
    }
/* ==========================================================================
       CONTRÔLE STRICT DU HEADER ET DU HAMBURGER (Zéro déplacement possible)
       ========================================================================== */
    header {
        position: relative !important;
        display: block !important; /* On casse le flexbox pour éviter les calculs de place */
        height: 60px !important;   /* Hauteur FIXE et STRICTE du bandeau */
        max-height: 60px !important;
        min-height: 60px !important;
        margin: 0 !important;      /* Supprime les marges de 1rem du style global */
        padding: 0 15px !important;
        background-color: var(--primary) !important;
        overflow: visible !important; /* Permet au menu de déborder en dessous */
        z-index: 99999 !important;
    }

    /* Force le bouton hamburger à se caler à gauche sans bouger d'un poil */
    .hamburger {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        left: 15px !important;
        transform: translateY(-50%) !important; /* Centre verticalement dans les 60px */
        width: 30px !important;
        height: 25px !important;
        cursor: pointer !important;
        z-index: 100000 !important;
        margin: 0 !important;
    }

    .hamburger .bar {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        margin: 5px 0 !important;
        transition: all 0.3s ease-in-out !important;
        background-color: #ffffff !important;
        border-radius: 2px !important;
    }

    /* Animations du X */
    .hamburger.active .bar:nth-child(2) { opacity: 0 !important; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; background-color: var(--accent) !important; }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; background-color: var(--accent) !important; }

    /* LE RIDEAU : Totalement déconnecté du reste de la page */
    .nav-menu {
        position: fixed !important; 
        top: 60px !important; /* S'ouvre pile sous les 60px fixes du header */
        left: 0 !important;
        width: 100% !important;
        background-color: var(--primary) !important;
        box-shadow: 0 20px 25px rgba(0,0,0,0.5) !important;
        max-height: 0 !important; /* Fermé par défaut */
        overflow: hidden !important;
        transition: max-height 0.3s ease-in-out !important;
        z-index: 99998 !important;
    }

    .nav-menu.active {
        max-height: 300px !important; /* Se déploie sur 300px max */
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .nav-menu ul {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .nav-menu li {
        width: 100% !important;
        margin: 0 !important;
    }

    .nav-menu a {
        display: block !important;
        padding: 15px 20px !important;
        color: #e2e8f0 !important;
        font-size: 16px !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }

    .nav-menu a.active {
        background-color: var(--accent-light) !important;
        color: var(--accent) !important;
        border-left: 4px solid var(--accent) !important;
    }

    /* On force le contenu sous le header (comme le formulaire de login) à ne jamais bouger */
    .container, form, .connexion {
        position: relative !important;
        z-index: 1 !important;
    }

    /* ==========================================================================
       TRANSFORMATION DU TABLEAU EN "CARTES" (Rubrique Gérer)
       ========================================================================== */
    table {
        display: block;
        width: 100% !important; /* Prend toute la largeur disponible pour les cartes */
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    thead {
        display: none; /* Cache l'en-tête du tableau devenu inutile */
    }
    
    tbody {
        display: block;
        width: 100%;
    }
    
    /* Chaque ligne devient une carte indépendante */
    table tr { 
        display: block;
        background: var(--bg-card);
        border: 1px solid #e2e8f0;
        border-radius: var(--radius);
        padding: 0.5rem 1rem;
        margin-bottom: 1.25rem;
        box-shadow: var(--shadow);
    }
    
    /* Configuration des cellules */
    table td { 
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f1f5f9;
        padding: 10px 0 !important;
        text-align: right;
        color: var(--text-dark);
        font-size: 15px;
    }

    table td:last-child {
        border-bottom: none; /* Retire la bordure sur le dernier élément de la carte */
    }
}
/* ==========================================================================
   CORRECTIF : Centrage parfait du bouton de connexion sur Mobile
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* On cible le bouton du formulaire de login */
    form button[type="submit"], 
    form .submit, 
    form .btn-action {
        display: block !important;
        width: 100% !important;      /* Recommandé sur mobile : prend toute la largeur pour cliquer facilement au pouce */
        max-width: 100% !important;   /* Annule toute limite de largeur qui le bloquerait à gauche */
        margin: 1.5rem auto 0 auto !important; /* Centre horizontalement s'il reste de l'espace */
        text-align: center !important;
    }
}