/* dmsoft by dmtech — dmBar : feuille de style */ :root{ --dm-blue:#1F4E79; --dm-blue-dark:#163a5a; --dm-gold:#BF8F00; --dm-bg:#f4f6f9; } body{ background:var(--dm-bg); color:#222; font-family:"Segoe UI",Arial,sans-serif; } .text-gold{ color:var(--dm-gold)!important; } .bg-gold{ background:var(--dm-gold)!important; } /* Cartes & titres */ .card{ border:none; border-radius:.7rem; box-shadow:0 1px 6px rgba(0,0,0,.07); } .card-header{ background:#fff; border-bottom:2px solid var(--dm-blue); font-weight:600; color:var(--dm-blue); border-radius:.7rem .7rem 0 0!important; } h1,h2,h3,h4{ color:var(--dm-blue); } .page-title{ border-left:5px solid var(--dm-gold); padding-left:.7rem; margin-bottom:1.2rem; } /* Boutons */ .btn-dm{ background:var(--dm-blue); color:#fff; } .btn-dm:hover{ background:var(--dm-blue-dark); color:#fff; } .btn-gold{ background:var(--dm-gold); color:#fff; } .btn-gold:hover{ background:#9c7400; color:#fff; } /* KPI */ .kpi{ border-radius:.7rem; color:#fff; padding:1.1rem 1.3rem; box-shadow:0 2px 8px rgba(0,0,0,.1); } .kpi .kpi-val{ font-size:1.7rem; font-weight:700; line-height:1; } .kpi .kpi-lbl{ opacity:.9; font-size:.9rem; } .kpi i{ font-size:1.9rem; opacity:.5; } .kpi-blue{ background:linear-gradient(135deg,#2a6fb0,var(--dm-blue)); } .kpi-gold{ background:linear-gradient(135deg,#d6a526,var(--dm-gold)); } .kpi-green{ background:linear-gradient(135deg,#3aa657,#1e7a3c); } .kpi-purple{ background:linear-gradient(135deg,#7e57c2,#512da8); } /* Paliers fidelite */ .badge.bg-bronze{ background:#a9744f!important; } .badge.bg-argent{ background:#9aa0a6!important; } .badge.bg-or{ background:var(--dm-gold)!important; } /* Plan de salle */ .table-card{ cursor:pointer; border-radius:.7rem; transition:.15s; text-align:center; padding:1.1rem .5rem; color:#fff; } .table-card:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,.18); } .table-card .num{ font-size:1.3rem; font-weight:700; } .t-libre{ background:linear-gradient(135deg,#3aa657,#1e7a3c); } .t-occupee{ background:linear-gradient(135deg,#e07b39,#c0571a); } .t-reservee{ background:linear-gradient(135deg,#9aa0a6,#6c757d); } /* POS commande */ .prod-btn{ width:100%; text-align:left; border:1px solid #e3e7ec; border-radius:.6rem; padding:.6rem .8rem; background:#fff; transition:.12s; } .prod-btn:hover{ border-color:var(--dm-blue); box-shadow:0 2px 6px rgba(31,78,121,.15); } .prod-btn .prix{ color:var(--dm-gold); font-weight:600; } /* Badge de stock en coin de la vignette (prise de commande) */ .prod-btn{ position:relative; } .prod-stock{ position:absolute; top:.3rem; right:.3rem; font-size:.68rem; font-weight:600; padding:.2em .45em; } html.tactile .prod-stock{ font-size:.8rem; } /* Miniatures produits (liste admin) */ .prod-thumb{ width:40px; height:40px; flex:0 0 40px; border-radius:.4rem; object-fit:contain; border:1px solid #e3e7ec; background:#f0f3f7; } .prod-thumb-empty{ display:inline-flex; align-items:center; justify-content:center; color:#aab4c0; font-size:1.1rem; } /* Reordonnancement par glisser-deposer */ .drag-handle{ cursor:grab; } .drag-handle:active{ cursor:grabbing; } tr.sortable-ghost{ opacity:.45; background:var(--dm-bg)!important; } /* Photo sur les vignettes de prise de commande : image entiere (pas de rognage), hauteur fluide selon l'ecran */ .prod-btn-img{ display:block; width:100%; height:auto; aspect-ratio:4/3; border-radius:.4rem; object-fit:contain; margin-bottom:.4rem; background:#f0f3f7; border:1px solid #eef1f5; } .prod-btn-img-empty{ display:flex; align-items:center; justify-content:center; color:#aab4c0; font-size:1.7rem; } html.tactile .prod-btn-img{ aspect-ratio:1/1; } /* Onglets de categorie (retour a la ligne, pilules dmBar bleu/or) — commande.php & produits.php */ .cat-tabs{ flex-wrap:wrap; gap:.4rem; } .cat-tabs .nav-link{ white-space:nowrap; color:var(--dm-blue); background:#fff; border:1px solid #dbe2ea; border-radius:2rem; padding:.4rem .9rem; font-weight:500; } .cat-tabs .nav-link:hover{ border-color:var(--dm-blue); } .cat-tabs .nav-link.active{ background:var(--dm-blue); border-color:var(--dm-blue); color:#fff; } .cat-tabs .nav-link.active .badge{ background:var(--dm-gold)!important; color:#1a1a1a!important; } html.tactile .cat-tabs .nav-link{ padding:.7rem 1.2rem; font-size:1.1rem; } /* Zoom des vignettes produits (commande.php) : N = nb par ligne (>=768px), memorise (dmProdZoom) */ @media (min-width:768px){ html.prodzoom-2 .prod-grid > [class*="col-"]{ width:50%; } html.prodzoom-3 .prod-grid > [class*="col-"]{ width:33.3333%; } html.prodzoom-4 .prod-grid > [class*="col-"]{ width:25%; } html.prodzoom-5 .prod-grid > [class*="col-"]{ width:20%; } } .prod-zoom-ctrl .btn{ color:var(--dm-blue); border-color:#dbe2ea; } .prod-zoom-ctrl .btn:hover:not(:disabled){ background:var(--dm-blue); border-color:var(--dm-blue); color:#fff; } .prod-zoom-ctrl .btn:disabled{ opacity:.4; } .ticket{ position:sticky; top:1rem; } /* ============================================================ Navigation laterale (sidebar) — identite dmBar (variables existantes) ============================================================ */ .dmbar-layout{ display:flex; align-items:stretch; min-height:100vh; } .dmbar-sidebar{ display:flex; flex-direction:column; color:#fff; background:linear-gradient(180deg,var(--dm-blue),var(--dm-blue-dark))!important; box-shadow:2px 0 8px rgba(0,0,0,.15); --bs-offcanvas-width:260px; } /* Desktop (>= lg) : colonne fixe et collante. En dessous, Bootstrap offcanvas gere le repli. */ @media (min-width:992px){ .dmbar-sidebar{ flex:0 0 250px; width:250px; position:sticky; top:0; height:100vh; } } .dmbar-content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; } /* Barre superieure mobile (hamburger) — visible uniquement < lg */ .dmbar-topbar{ display:flex; align-items:center; gap:.6rem; padding:.45rem .8rem; background:linear-gradient(90deg,var(--dm-blue),var(--dm-blue-dark)); color:#fff; position:sticky; top:0; z-index:1030; box-shadow:0 2px 8px rgba(0,0,0,.15); } .dmbar-topbar-brand{ color:#fff; text-decoration:none; font-weight:800; font-size:1.2rem; } .dmbar-content > main{ flex:1 0 auto; } .sidebar-brand{ padding:1rem 1.1rem; font-size:1.4rem; font-weight:800; line-height:1; border-bottom:1px solid rgba(255,255,255,.12); } .sidebar-brand a{ color:#fff; text-decoration:none; } .sidebar-nav{ flex:1 1 auto; overflow-y:auto; padding:.6rem .5rem; } .sidebar-nav .nav-link{ color:rgba(255,255,255,.85); font-weight:500; border-radius:.45rem; padding:.55rem .8rem; display:flex; align-items:center; gap:.6rem; } .sidebar-nav .nav-link:hover{ background:rgba(255,255,255,.10); color:#fff; } .sidebar-nav .nav-link.active{ background:rgba(255,255,255,.18); color:#fff; } .sidebar-nav .nav-link i{ width:1.25em; text-align:center; } .sidebar-nav .group-toggle{ justify-content:space-between; } .sidebar-nav .group-toggle > span{ display:flex; align-items:center; gap:.6rem; } .sidebar-nav .group-toggle .chev{ width:auto; font-size:.8rem; transition:transform .2s; } .sidebar-nav .group-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); } .sidebar-nav .sub-nav{ list-style:none; margin:.1rem 0 .3rem; padding:0; } .sidebar-nav .sub-nav .nav-link{ padding-left:2.1rem; font-size:.95rem; } .sidebar-footer{ border-top:1px solid rgba(255,255,255,.12); padding:.75rem; } .sidebar-footer .sidebar-user{ color:#fff; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; } /* ===== Repli de la sidebar (desktop >= lg) : bouton fixe + glissement ===== */ .dmbar-sidebar-toggle{ position:fixed; top:.55rem; left:.6rem; z-index:1031; width:38px; height:38px; align-items:center; justify-content:center; border:none; border-radius:.5rem; background:rgba(255,255,255,.15); color:#fff; font-size:1.15rem; line-height:1; cursor:pointer; transition:background .15s; } .dmbar-sidebar-toggle:hover{ background:rgba(255,255,255,.30); } /* Repliee : le bouton surplombe le contenu clair -> fond bleu plein pour rester visible */ html.sidebar-collapsed .dmbar-sidebar-toggle{ background:var(--dm-blue); box-shadow:0 2px 8px rgba(0,0,0,.25); } @media (min-width:992px){ .dmbar-sidebar{ transition:margin-left .25s ease; } .sidebar-brand{ padding-left:3.4rem; } /* place pour le bouton pres du logo */ html.sidebar-collapsed .dmbar-sidebar{ margin-left:-250px; box-shadow:none; } html.sidebar-collapsed .dmbar-content > main{ padding-left:3.4rem; } /* le titre degage le bouton */ } /* Impression : masquer la navigation, n'imprimer que le contenu */ @media print{ .dmbar-sidebar, .dmbar-topbar, .dmbar-sidebar-toggle{ display:none!important; } } /* Footer */ .dmbar-footer{ background:#fff; border-top:1px solid #e3e7ec; color:#666; } /* Login */ .login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--dm-blue),var(--dm-blue-dark)); } .login-card{ width:100%; max-width:480px; border-radius:1rem; } .login-logo{ font-size:2.2rem; font-weight:800; color:var(--dm-blue); } .text-dm{ color:var(--dm-blue)!important; } /* Titres de section dans les formulaires */ .form-section-title{ color:var(--dm-blue); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:2px solid var(--dm-gold); padding-bottom:.3rem; margin:.2rem 0 .9rem; } .form-section-title i{ color:var(--dm-gold); } /* Vignettes utilisateurs (connexion tablette partagee) */ .user-tile{ display:flex; flex-direction:column; align-items:center; gap:.45rem; width:100%; border:1px solid #e3e7ec; border-radius:.8rem; background:#fff; padding:1rem .5rem; transition:.12s; cursor:pointer; } .user-tile:hover, .user-tile:focus-visible{ border-color:var(--dm-blue); box-shadow:0 3px 10px rgba(31,78,121,.18); outline:none; } .user-avatar{ width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; color:#fff; background:linear-gradient(135deg,#2a6fb0,var(--dm-blue)); } .user-avatar-lg{ width:64px; height:64px; font-size:1.7rem; } .user-name{ font-weight:600; color:var(--dm-blue); line-height:1.15; text-align:center; } /* ============================================================ Mode tactile — active par le bouton (classe .tactile sur ) Par defaut (sans .tactile), l'affichage PC reste inchange. ============================================================ */ #btnTactile.active{ background:var(--dm-gold)!important; border-color:var(--dm-gold)!important; color:#fff!important; } /* Champs numeriques relies au pave tactile */ html.tactile .tactile-num{ font-size:1.5rem; padding:.7rem .9rem; text-align:right; cursor:pointer; } /* Boutons de groupe (ex. "Max") plus larges au doigt */ html.tactile .input-group .btn{ font-size:1.15rem; padding:.7rem 1.1rem; } /* Boutons principaux agrandis */ html.tactile .btn-lg{ min-height:64px; font-size:1.35rem; } /* Tuiles "mode de paiement" : icone au-dessus, grande cible */ html.tactile .pay-tile{ padding:1.1rem .4rem; font-size:1.15rem; } html.tactile .pay-tile i{ display:block; font-size:1.9rem; margin-bottom:.3rem; } /* ---- Pave numerique custom (cache par defaut, donc invisible sur PC) ---- */ .numpad-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:flex-end; justify-content:center; z-index:1080; } .numpad-overlay.show{ display:flex; } .numpad{ background:#fff; width:100%; max-width:420px; border-radius:1rem 1rem 0 0; padding:1rem; box-shadow:0 -4px 24px rgba(0,0,0,.25); } .numpad-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:2px solid var(--dm-blue); padding-bottom:.5rem; margin-bottom:.7rem; } .numpad-val{ font-size:1.9rem; font-weight:700; color:var(--dm-blue); } .numpad-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; } .numpad-grid button{ font-size:1.5rem; font-weight:600; padding:1rem 0; border:1px solid #d5dbe2; border-radius:.6rem; background:#f8fafc; color:#222; } .numpad-grid button:active{ background:#e9eef4; } .numpad-grid .np-ok{ grid-column:span 3; background:var(--dm-gold); border-color:var(--dm-gold); color:#fff; } /* ---- Salle / Commande en mode tactile ---- */ /* Cartes de table plus grandes au doigt */ html.tactile .table-card{ padding:1.6rem .6rem; } html.tactile .table-card .num{ font-size:1.7rem; } /* Vignettes produits agrandies (nom + prix proeminents) */ html.tactile .prod-btn{ padding:1.1rem 1rem; min-height:84px; font-size:1.15rem; text-align:center; } html.tactile .prod-btn .prix{ font-size:1.2rem; } /* Boutons quantite (+/-) et suppression agrandis */ html.tactile .qte-btn{ font-size:1.2rem; padding:.5rem .9rem!important; line-height:1; } /* ---- Avertissement de deconnexion automatique (inactivite.js) ---- */ .dm-inactivite-overlay{ position:fixed; inset:0; z-index:1080; background:rgba(22,58,90,.55); /* voile bleu fonce semi-transparent */ display:flex; align-items:center; justify-content:center; padding:1rem; } .dm-inactivite-overlay[hidden]{ display:none; } /* respecte l'attribut hidden malgre le flex */ .dm-inactivite-boite{ background:#fff; border-radius:.8rem; padding:1.8rem 2rem; max-width:380px; width:100%; text-align:center; box-shadow:0 8px 30px rgba(0,0,0,.3); border-top:5px solid var(--dm-gold); } .dm-inactivite-icone{ font-size:2.4rem; color:var(--dm-gold); line-height:1; margin-bottom:.3rem; } .dm-inactivite-boite h5{ color:var(--dm-blue); margin-bottom:.6rem; } .dm-inactivite-compte{ color:var(--dm-gold); font-size:1.2rem; } .dm-inactivite-boite .btn-dm{ margin-top:.6rem; padding:.5rem 1.4rem; } /* ----- Liste deroulante recherchable (assets/js/searchselect.js) ----- Global (chargee partout via header.php) : masque le