:root { --black: #000; --mid: #888; --light: #F4F4F4; --white: #FFF; --border: #DDD; }
body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: var(--light); color: var(--black); margin: 0; padding: 0; line-height: 1.5; }
.container { max-width: 1000px; margin: 30px auto; padding: 0 20px; }
header { text-align: center; margin-bottom: 40px; border-bottom: 2px solid var(--black); padding-bottom: 20px; }
nav a { text-decoration: none; color: var(--black); font-weight: 600; margin: 0 15px; text-transform: uppercase; letter-spacing: 1px; }
.card { background: var(--white); padding: 30px; border: 2px solid var(--black); margin-bottom: 25px; }
h2, h3 { text-transform: uppercase; letter-spacing: 1px; margin-top: 0; }
.btn { background: var(--black); color: var(--white); border: 2px solid var(--black); padding: 12px 24px; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; text-transform: uppercase; letter-spacing: 1px; transition: 0.3s; }
.btn:hover { background: var(--white); color: var(--black); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-small { padding: 5px 10px; font-size: 0.8em; }
.btn-outline { background: var(--white); color: var(--black); }
.btn-outline.active { background: var(--black); color: var(--white); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.menu-item { border: 2px solid var(--border); padding: 20px; text-align: center; cursor: pointer; transition: 0.3s; }
.menu-item:hover, .menu-item.active { border-color: var(--black); background: var(--light); }
.price { font-weight: bold; font-size: 1.3em; margin-top: 10px; }
.option-label { display: block; margin-bottom: 10px; font-weight: 500; cursor: pointer; }
input[type="text"], input[type="password"] { width: 100%; padding: 15px; margin: 10px 0 25px; border: 2px solid var(--border); box-sizing: border-box; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th { background: var(--black); color: var(--white); padding: 15px; text-align: left; text-transform: uppercase; font-size: 0.85em; }
td { padding: 15px; border-bottom: 2px solid var(--border); vertical-align: middle; }
.badge-solid { background: var(--black); color: var(--white); padding: 5px 10px; font-weight: bold; font-size: 0.8em; border: 2px solid var(--black); }
.badge-outline { background: var(--white); color: var(--black); padding: 5px 10px; font-weight: bold; font-size: 0.8em; border: 2px solid var(--black); }
.error-msg { border: 2px solid var(--black); padding: 15px; text-align: center; margin-bottom: 20px; font-weight: bold; background: #ffe6e6; }

/* =================================================================
   📱 AJOUTS MOBILE (À coller à la fin de public/css/style.css)
   ================================================================= */
@media (max-width: 768px) {

    /* --- 1. AJUSTEMENTS GLOBAUX --- */
    body {
        /* On réduit les marges externes pour gagner de la place */
        padding: 10px 5px; 
    }

    .container {
        max-width: 100%;
        margin: 10px auto;
        padding: 0 5px;
    }

    header {
        margin-bottom: 20px;
        padding-bottom: 10px;
    }

    /* --- 2. NAVIGATION VERTICALE --- */
    /* Sur mobile, on empile les liens du menu pour qu'ils soient faciles à cliquer */
    nav a {
        display: block;
        margin: 10px 0;
        padding: 12px;
        border: 2px solid var(--border); /* On ajoute un cadre pour délimiter */
        background: var(--white);
        text-align: center;
    }
    
    nav a:hover, nav a:active {
        border-color: var(--black);
        background: var(--light);
    }

    /* --- 3. GRILLE DU MENU (BURGERS) --- */
    /* On force une seule colonne pour bien voir les photos et textes */
    .menu-grid {
        grid-template-columns: 1fr; /* 1 seule colonne qui prend tout l'espace */
        gap: 15px;
    }

    .menu-item {
        padding: 15px; /* Un peu moins de padding interne */
    }

    /* --- 4. FORMULAIRES & BOUTONS --- */
    /* On grossit tout pour les doigts */
    input[type="text"], 
    input[type="password"], 
    input[type="number"],
    select,
    .btn {
        width: 100%;          /* Largeur totale */
        box-sizing: border-box;
        padding: 15px;        /* Zone de clic confortable */
        font-size: 16px;      /* Évite le zoom automatique sur iPhone */
        margin-bottom: 15px;
    }

    /* --- 5. TABLEAUX (ADMIN & SUIVI) --- */
    /* Indispensable : permet de scroller le tableau horizontalement sans casser la page */
    table {
        display: block;
        width: 100%;
        overflow-x: auto; /* Scroll horizontal */
        white-space: nowrap; /* Empêche le texte de revenir à la ligne */
        border: none; /* On retire la bordure globale pour éviter les doubles traits */
    }
    
    th, td {
        padding: 10px; /* Un peu plus compact */
    }

    /* --- 6. PAGE SUCCÈS / TICKET --- */
    /* Le numéro de commande en GROS pour le montrer au camion */
    h2 strong, .ticket-number {
        display: block;
        font-size: 3.5rem;
        text-align: center;
        margin: 20px 0;
        border: 4px dashed var(--black);
        padding: 20px;
        background: var(--white);
    }

    /* --- 7. MODIFICATIONS SPÉCIFIQUES --- */
    /* Masquer les éléments moins importants si besoin */
    .hide-mobile {
        display: none;
    }
    
    /* Le panier résumé en bas (si tu l'utilises) */
    .sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--black);
        color: var(--white);
        padding: 15px;
        text-align: center;
        z-index: 999;
        border-top: 2px solid var(--white);
    }
    
    /* Ajouter de l'espace en bas du body pour ne pas cacher le contenu derrière le footer */
    body {
        padding-bottom: 80px;
    }
}