/* Fichier: static/css/custom.css */

/* --- Amélioration de l'interface sur les petits écrans (smartphones) --- */
@media (max-width: 600px) {

    /* 1. Formulaire de Facturation : Forcer une seule colonne */
    /* Le formulaire de facturation utilise 'grid' pour les champs Statut/Catégorie et Mètres/Paiement.
       Sur mobile, on force ces grilles à n'avoir qu'une seule colonne pour la lisibilité. */
    main .grid {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    /* 2. Réalignement des champs spécifiques de facturation */
    /* On enlève les marges horizontales des champs simples pour utiliser toute la largeur */
    main .grid > * {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    /* 3. Simplifier l'affichage des titres des sections */
    /* (ex: "1. Sélectionner le Lieu du Marché") */
    main h3 {
        font-size: 1.2rem;
        word-break: break-word; /* Permet aux titres trop longs de sauter à la ligne proprement */
    }

    /* 4. Rendre les tableaux défilables horizontalement */
    /* Ceci est pour les pages Commerçants, Abonnements, et Historiques. */
    table {
        display: block; /* Permet au tableau de sortir de son conteneur */
        width: 100%;
        overflow-x: auto; /* Permet le défilement horizontal */
        white-space: nowrap; /* Empêche le texte de s'étirer sur plusieurs lignes dans les cellules */
    }
}