/* =====================================================================
   style.css — Feuille de style principale memujour (caisse Kedji)
   Couleurs de la marque Kedji : rose magenta + noir + or (couronne).
   Concu pour ecran tactile : gros boutons, contrastes nets, lisible.
   ===================================================================== */

:root {
    --rose: #c2185b;          /* Rose Kedji principal */
    --rose-clair: #e91e8c;    /* Rose vif (degrade) */
    --rose-fonce: #8e1248;
    --noir: #111111;
    --or: #d4af37;            /* Couronne */
    --gris-fond: #f4f5f7;
    --gris-bord: #e2e5ea;
    --gris-texte: #555;
    --blanc: #ffffff;
    --vert: #2e9e5b;          /* Statut payé / OK */
    --rouge: #d93838;         /* Erreur / rupture */
    --rayon: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris-fond);
    color: var(--noir);
}

/* ----- Boutons ----- */
.bouton-principal {
    display: inline-block;
    background: linear-gradient(135deg, var(--rose), var(--rose-clair));
    color: var(--blanc);
    border: none;
    border-radius: var(--rayon);
    padding: 16px 24px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: filter .15s;
}
.bouton-principal:hover { filter: brightness(1.05); }
.bouton-principal:active { filter: brightness(.95); }

/* ----- Alertes ----- */
.alerte { padding: 12px 14px; border-radius: var(--rayon); margin-bottom: 14px; font-size: 15px; }
.alerte-erreur { background: #fdecea; color: var(--rouge); border: 1px solid #f5c6cb; }
.alerte-succes { background: #e8f6ee; color: var(--vert); border: 1px solid #bfe3cd; }
.alerte-info   { background: #eef3fb; color: #2a5db0; border: 1px solid #cdddf5; }

/* =====================================================================
   Page de connexion
   ===================================================================== */
.page-connexion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, #2a2a2a, var(--noir));
    padding: 20px;
}

.carte-connexion {
    background: var(--blanc);
    width: 100%;
    max-width: 380px;
    padding: 34px 30px 30px;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* Logo Kedji (version texte/placeholder) */
.logo-kedji {
    background: var(--noir);
    border-radius: 14px;
    padding: 18px 10px 14px;
    text-align: center;
    margin-bottom: 22px;
    border-bottom: 4px solid var(--rose);
}
.logo-couronne { display: block; font-size: 26px; line-height: 1; }
.logo-nom {
    display: block;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 46px;
    color: var(--blanc);
    line-height: 1;
}
.logo-sous {
    display: block;
    color: var(--blanc);
    letter-spacing: 2px;
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 4px;
}

.titre-connexion {
    text-align: center;
    font-size: 20px;
    color: var(--rose);
    margin: 0 0 20px;
}

.formulaire-connexion label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gris-texte);
    margin-bottom: 14px;
}
.formulaire-connexion input {
    width: 100%;
    margin-top: 6px;
    padding: 14px;
    font-size: 16px;
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    outline: none;
}
.formulaire-connexion input:focus { border-color: var(--rose); }

/* =====================================================================
   Mise en page de l'application (sidebar + zone principale)
   ===================================================================== */
/* Hauteur fixe + chaque colonne defile de son cote (menu independant du contenu) */
.application { display: flex; height: 100vh; overflow: hidden; }

/* ----- Barre laterale ----- */
.barre-laterale {
    width: 230px;
    background: var(--noir);
    color: var(--blanc);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;   /* le menu defile seul */
}
.logo-laterale {
    margin: 0;
    border-radius: 0;
    border-bottom: 4px solid var(--rose);
}
.logo-laterale .logo-nom { font-size: 36px; }
.navigation { display: flex; flex-direction: column; padding: 12px 8px; gap: 4px; }
.lien-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: #ddd;
    text-decoration: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
}
.lien-nav:hover { background: #1f1f1f; color: #fff; }
.lien-nav.actif { background: linear-gradient(135deg, var(--rose), var(--rose-clair)); color: #fff; }
.nav-icone { font-size: 18px; width: 22px; text-align: center; }

/* ----- Zone principale ----- */
.zone-principale {
    flex: 1; display: flex; flex-direction: column; min-width: 0;
    height: 100vh;
    overflow-y: auto;   /* le contenu defile de son cote */
}

.barre-haute {
    background: var(--blanc);
    border-bottom: 1px solid var(--gris-bord);
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;   /* l'entete reste visible pendant le defilement */
    top: 0;
    z-index: 20;
}
.titre-page { font-size: 20px; margin: 0; color: var(--noir); }

/* Badge utilisateur (haut droite) */
.badge-utilisateur { display: flex; align-items: center; gap: 10px; }
.badge-infos { text-align: right; line-height: 1.2; }
.badge-nom { display: block; font-weight: 700; font-size: 14px; }
.badge-role { display: block; font-size: 12px; color: var(--gris-texte); }
.badge-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--rose), var(--rose-clair));
    color: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 18px;
}
.badge-sortie {
    text-decoration: none; font-size: 20px; color: var(--gris-texte);
    padding: 6px 8px; border-radius: 8px;
}
.badge-sortie:hover { background: #fdecea; color: var(--rouge); }

.contenu { padding: 24px; flex: 1; }
.pied-page { padding: 14px 24px; color: var(--gris-texte); font-size: 13px; text-align: center; }

/* ----- Cartes ----- */
.carte {
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    padding: 22px;
    margin-bottom: 20px;
}
.carte h2 { margin-top: 0; }
.texte-doux { color: var(--gris-texte); }

/* Grille de cartes statistiques */
.grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.carte-stat {
    background: var(--blanc);
    border: 1px solid var(--gris-bord);
    border-radius: var(--rayon);
    padding: 20px;
    display: flex; flex-direction: column; gap: 4px;
}
.carte-stat-rose {
    background: linear-gradient(135deg, var(--rose), var(--rose-clair));
    color: #fff; border: none;
}
.stat-icone { font-size: 26px; }
.stat-valeur { font-size: 26px; font-weight: 800; }
.stat-libelle { font-size: 13px; opacity: .85; }

/* Boutons secondaires + larges */
.bouton-secondaire {
    display: inline-block;
    background: var(--blanc);
    color: var(--rose);
    border: 2px solid var(--rose);
    border-radius: var(--rayon);
    padding: 14px 22px;
    font-size: 16px; font-weight: 700;
    text-decoration: none; cursor: pointer;
}
.bouton-secondaire:hover { background: #fdf0f6; }
.bouton-large { width: auto; }
.acces-rapides { display: flex; flex-wrap: wrap; gap: 12px; }
.acces-rapides a { text-decoration: none; }

/* ----- Tableaux ----- */
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--gris-bord); }
.tableau th { font-size: 13px; color: var(--gris-texte); text-transform: uppercase; letter-spacing: .5px; }

/* Etiquettes de statut */
.etiquette { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.etiquette-actif    { background: #e8f6ee; color: var(--vert); }
.etiquette-essai    { background: #eef3fb; color: #2a5db0; }
.etiquette-suspendu { background: #fdecea; color: var(--rouge); }

/* ----- Adaptation petit ecran / tablette ----- */
@media (max-width: 760px) {
    .application { flex-direction: column; }
    .barre-laterale { width: 100%; }
    .navigation { flex-direction: row; flex-wrap: wrap; }
    .nav-libelle { display: none; }
}

/* =====================================================================
   Module Menu & Plats (CMS)
   ===================================================================== */
.entete-carte { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.entete-carte a { text-decoration: none; }

/* Categories : puces editables */
.liste-categories { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.puce-categorie {
    display: flex; align-items: center; gap: 8px;
    background: var(--gris-fond); border: 1px solid var(--gris-bord);
    border-radius: 30px; padding: 6px 10px 6px 14px;
}
.form-renommer { display: flex; align-items: center; gap: 4px; }
.form-renommer input {
    border: none; background: transparent; font-weight: 700; font-size: 15px;
    width: 120px; padding: 4px;
}
.form-renommer input:focus { outline: 1px solid var(--rose); border-radius: 6px; }
.badge-compte { font-size: 12px; color: var(--gris-texte); }

.form-ajout-categorie { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.form-ajout-categorie input {
    flex: 1; min-width: 200px; padding: 12px;
    border: 1px solid var(--gris-bord); border-radius: var(--rayon); font-size: 15px;
}
.form-ajout-categorie a, .form-ajout-categorie button { text-decoration: none; }

.titre-categorie {
    margin: 22px 0 8px; padding-bottom: 6px;
    border-bottom: 2px solid var(--rose); color: var(--rose);
}

/* Mini boutons (icones d'action) */
.mini-bouton {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gris-fond); border: 1px solid var(--gris-bord);
    border-radius: 8px; padding: 6px 9px; font-size: 15px;
    cursor: pointer; text-decoration: none; color: inherit;
}
.mini-bouton:hover { background: #ececf0; }
.mini-bouton.danger:hover { background: #fdecea; border-color: #f5c6cb; }
.actions { display: flex; gap: 6px; align-items: center; }
.actions form { display: inline; }

/* Boutons-etiquettes cliquables (bascule stock / menu-jour) */
.etiquette { border: none; cursor: pointer; }
button.etiquette { font-family: inherit; }

/* Vignette plat */
.vignette { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 8px; }
.apercu { max-width: 160px; border-radius: 10px; margin: 4px 0 10px; display: block; }

/* Formulaire generique */
.formulaire label { display: block; font-weight: 600; font-size: 14px; color: var(--gris-texte); margin-bottom: 14px; }
.formulaire label.case { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--noir); }
.formulaire input[type=text], .formulaire input[type=number],
.formulaire select, .formulaire textarea {
    width: 100%; margin-top: 6px; padding: 12px;
    border: 1px solid var(--gris-bord); border-radius: var(--rayon); font-size: 15px;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--rose); }
.actions-formulaire { display: flex; gap: 12px; margin-top: 10px; }
.actions-formulaire a, .actions-formulaire button { text-decoration: none; }

/* =====================================================================
   Module Caisse (POS tactile)
   ===================================================================== */
.caisse { display: flex; gap: 18px; align-items: flex-start; }
.caisse-plats { flex: 1; min-width: 0; }
.caisse-panier {
    width: 340px; flex-shrink: 0;
    background: var(--blanc); border: 1px solid var(--gris-bord);
    border-radius: var(--rayon); padding: 16px;
    position: sticky; top: 16px;
}
.caisse-panier h2 { margin: 0 0 12px; font-size: 18px; }

/* Filtres categories */
.filtres-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtre-cat {
    background: var(--blanc); border: 1px solid var(--gris-bord);
    border-radius: 30px; padding: 9px 16px; font-size: 14px; font-weight: 600;
    cursor: pointer; color: var(--noir);
}
.filtre-cat.actif { background: var(--noir); color: #fff; border-color: var(--noir); }

/* Grille de plats (gros boutons tactiles) */
.grille-plats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.plat-bouton {
    background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: 14px;
    padding: 12px 8px; cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    transition: transform .08s, box-shadow .12s;
}
.plat-bouton:hover { box-shadow: 0 6px 16px rgba(0,0,0,.12); border-color: var(--rose); }
.plat-bouton:active { transform: scale(.96); }
.plat-bouton img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; }
.plat-emoji { font-size: 46px; line-height: 70px; }
.plat-nom { font-weight: 700; font-size: 14px; }
.plat-prix { color: var(--rose); font-weight: 800; font-size: 14px; }

/* Lignes du panier */
.lignes-panier { max-height: 38vh; overflow-y: auto; margin-bottom: 12px; }
.panier-vide { color: var(--gris-texte); text-align: center; padding: 24px 0; }
.ligne-article {
    display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--gris-bord);
}
.art-nom { display: block; font-weight: 700; font-size: 14px; }
.art-prix { display: block; font-size: 12px; color: var(--gris-texte); }
.art-quantite { display: flex; align-items: center; gap: 6px; }
.qte-moins, .qte-plus {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gris-bord);
    background: var(--gris-fond); font-size: 18px; cursor: pointer; line-height: 1;
}
.qte-valeur { min-width: 20px; text-align: center; font-weight: 700; }
.art-soustotal { font-weight: 800; font-size: 14px; white-space: nowrap; }

/* Bas du panier (totaux + paiement) */
.panier-bas { border-top: 2px solid var(--noir); padding-top: 12px; }
.ligne-total { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; font-size: 15px; }
.ligne-total.net strong { color: var(--rose); font-size: 22px; }
.ligne-total.monnaie strong { color: var(--vert); }
.champ-inline { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--gris-texte); margin: 10px 0; }
.champ-inline input, .champ-inline select {
    margin-top: 5px; padding: 11px; border: 1px solid var(--gris-bord);
    border-radius: 10px; font-size: 15px;
}
.actions-caisse { display: flex; gap: 10px; margin-top: 14px; }
.actions-caisse .bouton-secondaire { flex: 0 0 90px; }
.actions-caisse .bouton-principal { flex: 1; }

.alerte-commandes-caisse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.alerte-commandes-caisse a {
    color: inherit;
    font-weight: 800;
}
/* Alerte compacte : une pastille discrete en bas a droite, qui ne masque
   ni le tableau ni les actions. Sur mobile elle s'etire au-dessus du bord. */
.alerte-flottante-commandes {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1000;
    width: max-content;
    max-width: min(260px, calc(100vw - 32px));
    background: var(--noir);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0,0,0,.25);
    padding: 9px 12px;
    display: none;
    flex-direction: column;
    gap: 2px;
    font-size: 12.5px;
    line-height: 1.3;
}
.alerte-flottante-commandes.visible { display: flex; }
.alerte-flottante-commandes strong { font-size: 13px; }
.alerte-flottante-commandes span { color: #ddd; font-size: 12px; overflow-wrap: anywhere; }
.alerte-flottante-commandes a {
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: underline;
}
@media (max-width: 900px) {
    /* Centree, au-dessus du bouton panier / de la barre du bas. */
    .alerte-flottante-commandes { right: 50%; transform: translateX(50%); bottom: 12px; }
}
/* Commande qui vient d'arriver : la carte entiere se teinte, plutot qu'un
   trait sur le bord. Dans une liste, l'oeil accroche une surface avant une
   ligne, et la couleur tient sur toute la hauteur de la carte. */
.commande-carte.commande-nouvelle {
    border: 1px solid var(--rose);
    background: #fff5fa;
}
.titre-commande { margin: 0; }

@media (max-width: 900px) {
    .caisse { flex-direction: column; }
    .caisse-panier { width: 100%; position: static; }
}

/* =====================================================================
   Ticket 80mm (impression thermique)
   ===================================================================== */
.page-ticket { background: #ddd; padding: 20px; }
.barre-ticket { display: flex; gap: 12px; justify-content: center; margin-bottom: 18px; }
.barre-ticket a, .barre-ticket button { text-decoration: none; width: auto; }

/* Ticket format carte postale 100 x 148 mm (imprimante EPSON TM-T70II).
   Police plus grande pour une bonne lisibilite. */
.ticket-80mm {
    width: 100mm; background: #fff; margin: 0 auto; padding: 6mm 7mm;
    font-family: "Consolas", "Courier New", monospace; color: #000; font-size: 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.ticket-entete { text-align: center; }
/* 18px suffisent pour un rouleau de 80 mm : au-dela, un nom de restaurant
   un peu long occupe trois lignes et repousse tout le ticket. */
.ticket-logo { font-size: 18px; font-weight: 800; line-height: 1.2; }
.ticket-contact { font-size: 12px; line-height: 1.3; margin-top: 2px; }
.ticket-sous { font-size: 13px; letter-spacing: 1px; }
.ticket-ligne-info { font-size: 12px; }
.ticket-separateur { border-top: 1px dashed #000; margin: 7px 0; }
.ticket-meta { font-size: 13px; line-height: 1.6; }
/* Numero de ticket a gauche, date a droite, sur la meme ligne */
.ticket-meta .tm-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ticket-lignes { width: 100%; border-collapse: collapse; font-size: 14px; }
.ticket-lignes td { padding: 3px 0; vertical-align: top; }
.tl-qte { width: 34px; }
.tl-prix { text-align: right; white-space: nowrap; }
.ticket-totaux { font-size: 14px; }
.tt-ligne { display: flex; justify-content: space-between; padding: 2px 0; }
.tt-grand { font-size: 19px; font-weight: 800; margin: 4px 0; }
.ticket-pied { text-align: center; font-size: 13px; margin-top: 6px; }

/* A l'impression : seul le ticket reste, adapte a une carte postale 100x148 mm.
   ATTENTION : @page ne peut pas etre limitee a une classe de page. Deux regles
   @page dans cette feuille s'appliqueraient donc a TOUS les documents, et la
   derniere l'emporterait — les tickets sortiraient en A4. Le format de chaque
   document est donc declare sur la page elle-meme (inclus/impression.php),
   pas ici. */
@media print {
    .sans-impression { display: none !important; }
    body.page-ticket { background: #fff; padding: 0; }
    .ticket-80mm { box-shadow: none; width: 100%; padding: 0; font-size: 13px; }
}

/* =====================================================================
   Logo image (vrai PNG) + responsive global (tous ecrans)
   ===================================================================== */
.logo-bloc { background: var(--noir); text-align: center; padding: 12px; }
.logo-bloc.logo-laterale { border-bottom: 4px solid var(--rose); }
.logo-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.logo-bloc.logo-connexion { border-radius: 14px; margin-bottom: 22px; }
.logo-bloc.logo-laterale .logo-img { max-height: 90px; }

/* Bouton menu (hamburger) : cache sur grand ecran */
.btn-menu {
    display: none;
    background: transparent; border: none; font-size: 26px;
    cursor: pointer; margin-right: 12px; color: var(--noir); line-height: 1;
}
/* Voile sombre derriere le menu mobile */
.voile-menu { display: none; }

/* ----- Tablette / mobile ----- */
@media (max-width: 900px) {
    .btn-menu { display: inline-block; }

    /* Menu lateral hors-ecran, glisse a l'ouverture */
    .barre-laterale {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
        width: 250px; transform: translateX(-100%);
        transition: transform .25s ease; overflow-y: auto;
    }
    body.menu-ouvert .barre-laterale { transform: translateX(0); }

    .navigation { flex-direction: column; }
    .nav-libelle { display: inline; }

    /* Voile clic-pour-fermer */
    body.menu-ouvert .voile-menu {
        display: block; position: fixed; inset: 0; z-index: 40;
        background: rgba(0,0,0,.5);
    }

    .contenu { padding: 16px; }
    .barre-haute { padding: 12px 16px; }
}

/* Tableaux : defilement horizontal sur petit ecran */
@media (max-width: 640px) {
    .tableau { display: block; overflow-x: auto; white-space: nowrap; }
    .badge-infos { display: none; } /* on garde juste l'avatar pour gagner de la place */
    .titre-page { font-size: 17px; }
}

/* =====================================================================
   Module Rapports
   ===================================================================== */
.onglets-periode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.onglet {
    text-decoration: none; padding: 10px 20px; border-radius: 30px;
    background: var(--gris-fond); border: 1px solid var(--gris-bord);
    color: var(--noir); font-weight: 700; font-size: 15px;
}
.onglet.actif { background: linear-gradient(135deg, var(--rose), var(--rose-clair)); color: #fff; border-color: transparent; }
.form-date-rapport { margin-left: auto; }
.form-date-rapport input {
    padding: 9px 12px; border: 1px solid var(--gris-bord);
    border-radius: 10px; font-size: 15px;
}

/* Graphique a barres (sans librairie) */
.graphique-barres {
    display: flex; align-items: flex-end; gap: 8px;
    height: 220px; padding-top: 20px; overflow-x: auto;
}
.barre-colonne {
    flex: 1; min-width: 34px; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end; height: 100%;
}
.barre {
    width: 70%; max-width: 46px;
    background: linear-gradient(180deg, var(--rose-clair), var(--rose));
    border-radius: 6px 6px 0 0; min-height: 2px;
}
.barre-montant { font-size: 11px; color: var(--gris-texte); margin-bottom: 4px; }
.barre-etiquette { font-size: 11px; color: var(--gris-texte); margin-top: 6px; white-space: nowrap; }

/* Deux colonnes (top plats / modes) */
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .deux-colonnes { grid-template-columns: 1fr; } }

/* A l'impression d'un rapport : on cache la navigation */
@media print {
    .barre-laterale, .barre-haute, .pied-page, .onglets-periode, .sans-impression { display: none !important; }
    .contenu { padding: 0; }
}

/* =====================================================================
   Module Clients & Abonnements
   ===================================================================== */
.form-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; align-items: center; }
.form-ligne input {
    flex: 1; min-width: 140px; padding: 12px;
    border: 1px solid var(--gris-bord); border-radius: var(--rayon); font-size: 15px;
}
/* Un bouton dans une ligne de formulaire se dimensionne sur son libellé.
   .bouton-principal porte width:100% — ce qu'il faut pour un bouton d'action
   isolé (connexion, encaisser), mais dans une ligne flex cela demande toute
   la largeur du conteneur : le bouton passait seul à la ligne et barrait la
   carte. Corrigé ici, à l'endroit qui décide déjà du comportement des boutons
   dans une form-ligne, plutôt que redit dans chaque feuille de page. */
   Vaut aussi pour les liens habillés en bouton (.form-ligne a.bouton-*) :
   « ⬇️ PDF du mois » barrait la carte pour la même raison. */
.form-ligne button,
.form-ligne .bouton-principal, .form-ligne .bouton-secondaire,
.entete-carte .bouton-principal, .entete-carte .bouton-secondaire {
    white-space: nowrap;
    width: auto;
}

/* Selecteur de periode : la seconde date n'apparait qu'en mode « Du ... au ... ».
   Le petit « au » evite qu'on hesite sur laquelle des deux dates est la fin. */
.selecteur-periode .champ-date-fin { display: inline-flex; align-items: center; gap: 10px; }
.selecteur-periode .champ-date-fin[hidden] { display: none; }
.selecteur-periode .separateur-date { color: var(--texte-doux, #777); font-size: .92rem; }
.form-recherche { display: flex; gap: 8px; }
.form-recherche input {
    padding: 10px 14px; border: 1px solid var(--gris-bord);
    border-radius: 30px; font-size: 15px; min-width: 220px;
}
@media (max-width: 640px) { .form-recherche input { min-width: 0; } }

/* Bouton de suppression definitive (corbeille) */
.danger-fort { color: var(--rouge); border-color: var(--rouge); }
.danger-fort:hover { background: #fdecea; }

/* Grille des permissions (formulaire utilisateur) */
.grille-permissions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px; margin-bottom: 14px;
}
.grille-permissions .case {
    background: var(--gris-fond); border: 1px solid var(--gris-bord);
    border-radius: 10px; padding: 12px; margin-bottom: 0;
}

/* Permissions organisees par domaine (memes domaines que le menu lateral) */
.grille-domaines-perms {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px; margin-bottom: 14px;
}
.bloc-perm-domaine {
    background: var(--gris-fond);
    border: 1px solid var(--gris-bord);
    border-radius: 12px;
    padding: 12px 14px;
}
/* La couleur du domaine se lit dans le titre et dans le filet qui le
   souligne. Elle disait deja la meme chose sur le bord gauche : un rappel
   de moins, et le contour arrondi redevient net. */
.bloc-perm-titre {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent, #444);
    padding-bottom: 10px; margin-bottom: 8px;
    border-bottom: 2px solid var(--accent, var(--gris-bord));
}
.bloc-perm-domaine .case { margin-bottom: 9px; font-weight: 600; }
.bloc-perm-domaine .case:last-child { margin-bottom: 0; }

/* Deux niveaux : le DROIT ouvre un domaine d'activite, les ECRANS qu'il
   contient se ferment un par un. Le decalage et le filet vertical disent
   l'appartenance sans qu'on ait a l'ecrire. */
.case-permission { margin-bottom: 6px; }
.liste-ecrans {
    margin: 0 0 10px 9px;
    padding-left: 12px;
    border-left: 2px solid var(--gris-bord);
}
.liste-ecrans:last-child { margin-bottom: 0; }
.bloc-perm-domaine .liste-ecrans .case { margin-bottom: 4px; font-weight: 500; font-size: 14px; }
.case-ecran { display: flex; align-items: center; gap: 6px; color: var(--gris-texte, #444); }
.ecran-ic { font-size: 14px; line-height: 1; }
/* Ecran hors droit (Tableau de bord, Corbeille) : aligne sur les autres
   ecrans, mais sans filet puisqu'il ne depend d'aucun droit au-dessus. */
.case-ecran-libre { font-weight: 500; font-size: 14px; }

/* Intitule de la sous-liste : sans lui, le droit « Utiliser la caisse » et
   l'ecran « Caisse » passent pour un doublon, et on en decoche un au hasard. */
.liste-ecrans-titre {
    display: block; margin-bottom: 5px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--gris-doux, #8a8f98);
}

/* Droit retire : ses ecrans n'ont plus d'objet. On les estompe au lieu de
   les cacher — voir ce qu'on vient de fermer evite de le rouvrir par erreur.
   Elles restent cliquables : cocher un ecran rend le droit correspondant. */
.liste-ecrans-inactive { opacity: .5; border-left-style: dashed; }

@media (max-width: 760px) {
    /* Cible tactile : 44 px de haut minimum sur chaque ligne cochable. */
    .bloc-perm-domaine .case { min-height: 44px; align-items: center; }
    .bloc-perm-domaine .liste-ecrans .case { font-size: 15px; }
}

/* =====================================================================
   Module Documents (factures & bons de commande)
   ===================================================================== */
/* Editeur : bloc total + lignes */
.bloc-total-doc {
    display: flex; flex-direction: column; justify-content: center;
    align-items: flex-end; gap: 4px;
}
.bloc-total-doc span { font-size: 13px; color: var(--gris-texte); }
.bloc-total-doc strong { font-size: 24px; color: var(--rose); }
#table-lignes input { width: 100%; padding: 9px; border: 1px solid var(--gris-bord); border-radius: 8px; font-size: 14px; }
#table-lignes .soustotal { font-weight: 700; white-space: nowrap; }

/* Document imprimable A4 */
.page-document { background: #ddd; padding: 24px; }
.feuille-a4 {
    width: 210mm; max-width: 100%; min-height: 290mm;
    background: #fff; margin: 0 auto; padding: 18mm 16mm;
    box-shadow: 0 6px 24px rgba(0,0,0,.3); color: #1a1a1a;
}
.doc-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
/* Même principe que le ticket : l'image porte déjà ses angles arrondis,
   le document n'ajoute pas de cadre autour. */
.doc-logo .logo-bloc,
.logo-bloc.logo-document { background: none; padding: 0; }
.doc-logo .logo-img,
.logo-bloc.logo-document .logo-img { max-height: 62px; max-width: 190px; }
.doc-resto { text-align: right; font-size: 13px; line-height: 1.5; }
.doc-bandeau { display: flex; justify-content: space-between; margin: 26px 0 18px; gap: 20px; }
.doc-titre { color: var(--rose); margin: 0 0 6px; font-size: 30px; letter-spacing: 1px; }
.doc-numero { font-weight: 700; font-size: 16px; }
.doc-client { background: var(--gris-fond); border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.5; min-width: 200px; }
.doc-client-titre { display: block; font-size: 12px; text-transform: uppercase; color: var(--gris-texte); letter-spacing: 1px; margin-bottom: 4px; }

.doc-tableau { width: 100%; border-collapse: collapse; margin-top: 10px; }
.doc-tableau th { background: var(--noir); color: #fff; padding: 10px 12px; text-align: left; font-size: 13px; }
.doc-tableau th.num, .doc-tableau td.num { text-align: right; }
.doc-tableau td { padding: 10px 12px; border-bottom: 1px solid var(--gris-bord); }

.doc-totaux { margin-top: 16px; margin-left: auto; width: 280px; }
.dt-ligne { display: flex; justify-content: space-between; padding: 6px 0; }
.dt-grand { border-top: 2px solid var(--noir); margin-top: 4px; padding-top: 10px; font-size: 20px; font-weight: 800; color: var(--rose); }
.doc-notes { margin-top: 24px; font-size: 13px; background: var(--gris-fond); padding: 12px 16px; border-radius: 10px; }
.doc-pied { margin-top: 40px; text-align: center; color: var(--gris-texte); font-size: 12px; border-top: 1px solid var(--gris-bord); padding-top: 12px; }

/* ---------------------------------------------------------------------
   Annexe « detail des repas servis » d'une facture d'abonne.

   La facture dit COMBIEN, l'annexe dit QUOI et QUAND. Deux lecteurs : le
   comptable paie sur la page 1, le responsable verifie sur la page 2.
   On garde donc exactement la meme mise en forme documentaire, avec un
   seul ajout : la journee comme niveau de lecture.
   --------------------------------------------------------------------- */
.annexe-facture { margin-top: 24px; }
.annexe-tete {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; border-bottom: 2px solid var(--noir); padding-bottom: 14px;
}
.annexe-resume { text-align: right; font-size: 13px; line-height: 1.6; }

/* Un seul tableau pour toute la periode. La colonne Jour est fusionnee sur
   les lignes de sa journee : le client suit la semaine de haut en bas sans
   chercher ou commence le lundi.

   Traits fins, comme la facture de la page 1 : c'est la meme piece, elle
   doit se lire de la meme facon. Seule la separation entre deux journees
   est appuyee, et un filet vertical isole la colonne Jour — le minimum
   pour que la fusion se voie. */
/* Deux gris pour deux roles, et rien de plus : un trait de STRUCTURE
   (bords, separation entre journees, colonne Jour) et un trait de LECTURE
   (entre deux plats d'une meme journee), plus leger. Melanger du noir franc
   et des hairlines presque invisibles donnait une grille incoherente, ou
   l'oeil ne savait plus ce qui separait quoi. */
.detail-jours {
    margin-top: 14px; table-layout: fixed;
    border: 1px solid #969ba2;          /* le tableau est ferme de tous cotes */
}
.detail-jours th { font-size: 12px; padding: 8px 10px; }
.detail-jours td {
    padding: 7px 10px; font-size: 13px; vertical-align: top;
    border-bottom: 1px solid #e2e5ea;   /* trait de lecture */
    border-right: 1px solid #e2e5ea;    /* separation de colonne */
}
.detail-jours td:last-child, .detail-jours th:last-child { border-right: none; }
/* Une journee commence : trait de structure, pour que le groupe se detache. */
.detail-jours tr.debut-jour > td { border-top: 1px solid #969ba2; }
.detail-jours tbody tr:first-child > td { border-top: none; }
.detail-jours tbody tr:last-child > td { border-bottom: none; }

.cellule-jour {
    /* La colonne fusionnee porte la meme force que les bords : c'est elle
       qui structure la lecture de toute la periode. */
    border-right: 1px solid #969ba2 !important;
    background: #fbfbfc;
    line-height: 1.45;
}
.jour-date { display: block; font-weight: 700; font-size: 13px; }
.jour-chiffre { display: block; font-size: 12px; color: var(--gris-texte); }
.jour-chiffre:last-child {
    font-weight: 600; color: var(--noir); font-variant-numeric: tabular-nums;
}

.detail-jours .col-plat { font-weight: 500; }
.detail-jours .col-categorie { color: var(--gris-texte); }
.detail-jours .num { font-variant-numeric: tabular-nums; }

/* Le bloc de total de la facture fait 280 px : « TOTAL DE LA PERIODE » s'y
   coupait en deux lignes. L'annexe lui donne la place de tenir d'un trait. */
.annexe-facture .doc-totaux { width: 380px; }
.annexe-facture .dt-grand { font-size: 17px; gap: 20px; }
.annexe-facture .dt-grand span:first-child { white-space: nowrap; }

.annexe-note {
    margin-top: 18px; font-size: 12px; color: var(--gris-texte);
    background: var(--gris-fond); padding: 10px 14px; border-radius: 8px;
}

/* Format A4 declare sur la page elle-meme (voir le commentaire du bloc ticket). */
@media print {
    .sans-impression { display: none !important; }
    body.page-document { background: #fff; padding: 0; }
    .feuille-a4 { box-shadow: none; width: auto; min-height: auto; padding: 0; }
    /* L'annexe part sur une feuille neuve : une facture coupee en deux au
       milieu de son total ne se presente pas a un client. */
    .annexe-facture { page-break-before: always; break-before: page; margin-top: 0; }
}

/* =====================================================================
   Carte publique (page client sans connexion)
   ===================================================================== */
.page-carte { background: var(--gris-fond); }
.carte-vide { text-align: center; padding: 80px 20px; }

.carte-entete {
    background: var(--noir); color: #fff;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; position: sticky; top: 0; z-index: 30;
    border-bottom: 4px solid var(--rose);
}
.logo-carte { background: transparent !important; padding: 0 !important; }
.logo-carte .logo-img { max-height: 60px; }
.carte-resto-nom { display: flex; flex-direction: column; }
.carte-resto-nom strong { font-size: 20px; }
.carte-resto-nom span { font-size: 13px; opacity: .8; }

.carte-corps {
    display: flex; gap: 20px; align-items: flex-start;
    max-width: 1200px; margin: 0 auto; padding: 20px;
}
.carte-plats { flex: 1; min-width: 0; }

/* Plats (version publique : carte verticale avec bouton) */
.plat-carte {
    background: #fff; border: 1px solid var(--gris-bord); border-radius: 14px;
    padding: 14px; display: flex; flex-direction: column; align-items: center;
    gap: 8px; text-align: center;
}
.plat-carte img { width: 100%; height: 130px; object-fit: cover; border-radius: 10px; }
.plat-carte .plat-emoji { font-size: 60px; }
.plat-carte .plat-nom { font-weight: 700; font-size: 15px; }
.plat-carte .plat-desc { font-size: 12px; color: var(--gris-texte); }
.plat-carte .plat-prix { color: var(--rose); font-weight: 800; font-size: 16px; }
.plat-carte .btn-ajouter { padding: 10px; font-size: 15px; margin-top: auto; }

/* Panier public */
.carte-panier {
    width: 340px; flex-shrink: 0; background: #fff;
    border: 1px solid var(--gris-bord); border-radius: var(--rayon);
    padding: 16px; position: sticky; top: 90px;
}
.carte-panier h2 { margin: 0 0 12px; font-size: 18px; }
.carte-panier-entete { display: flex; align-items: center; justify-content: space-between; }
/* Croix de fermeture + bouton flottant + voile : masques sur grand ecran */
.fermer-panier { display: none; background: none; border: none; font-size: 22px; line-height: 1; color: var(--gris-texte); cursor: pointer; padding: 2px 6px; }
/* Pied de la carte publique : l'entree de l'equipe, volontairement effacee.
   Marge basse genereuse pour ne pas passer sous le bouton panier flottant. */
.pied-carte {
    text-align: center;
    padding: 26px 16px 90px;
    font-size: .82rem;
}
.pied-carte a {
    color: #9a9a9a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.pied-carte a:hover,
.pied-carte a:focus-visible { color: #666; border-bottom-color: #bbb; }

.fab-panier { display: none; }
.voile-panier { display: none; }

.bouton-whatsapp {
    width: 100%; margin-top: 14px; padding: 15px;
    background: #25d366; color: #fff; border: none; border-radius: var(--rayon);
    font-size: 16px; font-weight: 700; cursor: pointer;
}
.bouton-whatsapp:hover { filter: brightness(1.05); }
.note-commande { font-size: 12px; color: var(--gris-texte); text-align: center; margin: 10px 0 0; }

@media (max-width: 900px) {
    .carte-corps { flex-direction: column; }

    /* Le panier devient un VOLET qui glisse depuis le bas de l'ecran. */
    .carte-panier {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; margin: 0; border: none; border-radius: 18px 18px 0 0;
        box-shadow: 0 -6px 24px rgba(0,0,0,.18);
        max-height: 85vh; overflow-y: auto;
        transform: translateY(110%); transition: transform .28s ease;
        z-index: 60;
    }
    .carte-panier.ouvert { transform: translateY(0); }
    .fermer-panier { display: block; }

    /* Voile sombre derriere le volet. */
    .voile-panier { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
    .voile-panier.visible { display: block; }

    /* Bouton panier flottant : visible des qu'il y a au moins un article. */
    .fab-panier.visible {
        display: flex; align-items: center; gap: 9px;
        position: fixed; right: 16px; bottom: 16px; z-index: 50;
        background: var(--rose); color: #fff; border: none; border-radius: 999px;
        padding: 12px 18px; font-size: 15px; font-weight: 800; cursor: pointer;
        box-shadow: 0 8px 22px rgba(0,0,0,.30);
    }
    .fab-icone { font-size: 20px; }
    .fab-compte {
        background: #fff; color: var(--rose); border-radius: 999px;
        min-width: 22px; height: 22px; padding: 0 6px;
        display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
    }
    .fab-total { font-weight: 800; }

    /* Marge en bas des plats pour ne pas rester sous le bouton flottant. */
    .carte-plats { padding-bottom: 84px; }
}

/* ----- Lien PUBLIC de la carte (tout en haut du menu) ----- */
.lien-carte-publique {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 4px 10px;
    padding: 11px 12px;
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13.5px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 3px 10px rgba(34,197,94,.28);
}
.lien-carte-publique:hover { filter: brightness(1.06); }
.lien-carte-publique .lcp-ext { margin-left: auto; opacity: .85; font-size: 14px; }

/* ----- Bloc de domaine (carte foncee + accent colore a gauche) ----- */
.nav-bloc {
    position: relative;
    background: #161616;
    border-radius: 14px;
    padding: 8px 8px 8px 12px;
    margin: 0 4px 8px;
    overflow: hidden;
}
.nav-bloc::before {
    /* Barre d'accent coloree a gauche du bloc */
    content: "";
    position: absolute;
    top: 8px; bottom: 8px; left: 4px;
    width: 4px;
    border-radius: 4px;
    background: var(--accent, #666);
}
.nav-bloc-titre {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 6px 8px 4px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    font-weight: 800;
    color: var(--accent, #9aa0a6);
}
.nav-bloc-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    font-size: 12px;
}
.nav-bloc .lien-nav { margin: 2px 0; }

/* ----- Champ mot de passe avec oeil (page de connexion) ----- */
/* La marge haute passe du champ au conteneur : sinon le centrage vertical
   de l'oeil se calcule sur une boite plus grande que le champ, et l'icone
   flotte quelques pixels trop haut. */
.champ-mot-de-passe { position: relative; display: block; margin-top: 6px; }
.champ-mot-de-passe input { width: 100%; margin-top: 0; padding-right: 46px; }
.bascule-mot-de-passe {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; padding: 0;
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; border-radius: 50%;
}
.bascule-mot-de-passe:hover { background: rgba(0, 0, 0, .06); }
.bascule-mot-de-passe:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* ----- Logo en tête des tickets 80 mm ----- */
/* Hauteur bornée : sur une imprimante thermique, une image trop grande
   sort en aplat noir et consomme du papier. Le nom du restaurant reste
   imprimé juste en dessous, pour que le ticket se lise même si le logo
   passe mal. */
.logo-ticket { text-align: center; margin-bottom: 4px; }
/* Aucun aplat ajouté par le logiciel : l'image imprimée est déjà rognée au
   plus près du dessin et ses angles sont arrondis (voir inclus/logo.php).
   Le fond sombre que l'on voit encore appartient au logo lui-même. */
.logo-bloc.logo-ticket { background: none; padding: 0; }
.logo-ticket img { max-height: 34px; max-width: 48mm; object-fit: contain; }
.logo-ticket .logo-kedji { font-size: 15px; font-weight: 800; }
@media print {
    /* Impression fidèle : sans cela certains navigateurs retirent les
       images de fond et éclaircissent le logo. */
    .logo-ticket img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Photo de l'utilisateur dans la barre haute : même gabarit que l'initiale
   qu'elle remplace, pour que la barre ne bouge pas d'un pixel. */
.badge-photo { object-fit: cover; padding: 0; }

/* ----- Cartes de statistiques cliquables (tableau de bord) ----- */
/* Le chiffre mène à l'écran qui l'explique. La carte reste sobre : elle se
   soulève légèrement au survol, et la mention du lien n'apparaît qu'à ce
   moment-là, pour ne pas encombrer la lecture des chiffres. */
a.carte-stat-lien { text-decoration: none; color: inherit; }
.carte-stat-lien { transition: transform .12s ease, box-shadow .12s ease; }
.carte-stat-lien:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45);
}
.carte-stat-lien:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.stat-lien {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .12s ease;
}
.carte-stat-lien:hover .stat-lien,
.carte-stat-lien:focus-visible .stat-lien { opacity: .85; }

/* Au doigt, il n'y a pas de survol : la mention reste visible. */
@media (hover: none) {
    .stat-lien { opacity: .7; }
}

/* ---------------------------------------------------------------
   Bandeau d'avertissement avant la deconnexion automatique.
   Pose en bas de l'ecran : en haut, il pousserait le contenu et
   ferait sauter la ligne qu'on etait en train de lire.
   --------------------------------------------------------------- */
.bandeau-inactivite {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 900;
    max-width: min(560px, 92vw);
    padding: 12px 20px;
    border-radius: 10px;
    background: #2c2c2c;
    color: #fff;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}

/* ---------------------------------------------------------------
   Bandeau des alertes de connexion (administrateur principal).
   Le texte a gauche, les deux gestes a droite : « Voir et
   débloquer » traite le fond, la croix ecarte simplement le
   bandeau. Sur telephone, tout passe l'un sous l'autre.
   --------------------------------------------------------------- */
.bandeau-securite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.bandeau-securite-texte { flex: 1 1 320px; }
.bandeau-securite-gestes {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.formulaire-inline { display: inline; margin: 0; }
.bouton-petit {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 7px;
}
/* La croix : discrete, mais assez large pour le doigt. Les 44 px viennent
   des recommandations tactiles : en dessous, on vise a cote. */
.bandeau-securite .bouton-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: inherit;
    opacity: .65;
}
.bandeau-securite .bouton-lien:hover { opacity: 1; }

/* Rappel de destination au-dessus d'un document imprimable.
   Dans un restaurant l'imprimante par defaut est celle des tickets : sans ce
   rappel, un A4 part sur un rouleau 80 mm et ressort comprime. */
/* Meme famille visuelle que .alerte-* : bordure uniforme, pas de liseré
   lateral. L'application n'utilise pas ce motif ailleurs. */
.rappel-destination {
    max-width: 800px; margin: -8px auto 18px; padding: 12px 14px;
    background: #fff8e1; border: 1px solid #f0d99a;
    border-radius: var(--rayon); color: #6b5200; font-size: 14px; line-height: 1.5;
}

/* Filtre « journée précise » de la liste des tickets. Il vit à côté des
   onglets de période : une date choisie l'emporte sur l'onglet. */
.form-jour { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.form-jour label { font-size: 13px; font-weight: 600; color: var(--gris-texte); }
.form-jour input {
    padding: 9px 12px; border: 1px solid var(--gris-bord);
    border-radius: 10px; font-size: 15px;
}
.form-jour input:focus { outline: none; border-color: var(--rose); }
.form-jour .bouton-secondaire { width: auto; padding: 9px 13px; font-size: 15px; }
@media (max-width: 760px) {
    .form-jour { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .form-jour input { flex: 1; }
}

/* Liste des tickets : colonne des plats lisible sans etirer le tableau. */
.tableau .col-plats { min-width: 150px; max-width: 220px; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
@media (max-width: 760px) { .tableau .col-plats { min-width: 0; max-width: none; } }

/* Caisse : barre flottante et voile du ticket, visibles seulement sur telephone. */
.fab-caisse, .voile-caisse { display: none; }
.caisse-panier .panier-entete { display: flex; align-items: center; justify-content: space-between; }