@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  --nuit: #14532D;
  --route: #1E7B3E;
  --ambre: #F5821F;
  --acacia: #17A24B;
  --sable: #FAFAF7;
  --encre: #1B1B1B;
  --alerte: #D64545;
}
* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin:0; font-family:'IBM Plex Sans',sans-serif; background:var(--sable); color:var(--encre);
  width: 100%; max-width: 100vw; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}
img, svg { max-width: 100%; }
button, input, select, textarea { font-family: inherit; }
.masque { display: none !important; }

/* Sous ~780px (téléphones et petites tablettes en portrait) : on force les
   champs de formulaire à 16px, sinon Safari iOS zoome automatiquement toute
   la page au moment où le clavier s'ouvre — ce "saut" est la première cause
   d'instabilité perçue sur mobile. */
@media (max-width: 780px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ================= ÉCRAN DE CONNEXION (compact) ================= */
.ecran-connexion {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 20%, var(--route) 0%, var(--nuit) 60%, #0B1B29 100%);
  padding: 20px;
}
.boite-connexion {
  width: 100%; max-width: 220px; background: #fff; border-radius: 12px;
  padding: 18px 16px 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.logo-icone-connexion { display:block; height:30px; width:auto; margin: 0 auto 8px; }
.marque-connexion { font-family:'Fraunces',serif; font-size:15px; text-align:center; margin: 0; color: var(--nuit); }
.marque-connexion span { color: var(--ambre); }
.sous-connexion { text-align:center; font-size:10px; color:#8A8473; margin: 3px 0 14px; }
.champ-connexion { margin-bottom: 10px; }
.champ-connexion label { display:block; font-size:10px; font-weight:600; color:#6B6659; margin-bottom:4px; }
.champ-connexion input {
  width:100%; padding:7px 9px; border-radius:7px; border:1.5px solid #E4DCC8;
  font-family:inherit; font-size:12px;
}
.champ-connexion input:focus { outline:none; border-color: var(--ambre); }
.erreur-connexion { color: var(--alerte); font-size:10.5px; min-height:12px; margin: 2px 0 6px; }
.btn-connexion {
  width:100%; padding:8px; border:none; border-radius:8px; margin-top:2px;
  background: var(--nuit); color:#fff; font-weight:700; font-size:12px; cursor:pointer;
}
.btn-connexion:hover { background: var(--route); }

/* ================= SHELL BUREAU ================= */
.app { display:block; min-height:100vh; }

/* ----- En-tête bureau ----- */
.entete-bureau {
  display:flex; align-items:center; gap:20px;
  background: linear-gradient(160deg, var(--nuit), var(--route));
  color: var(--sable);
  padding: 18px 28px;
}
.marque-bureau { margin-right:auto; display:flex; align-items:center; gap:12px; }
.logo-icone-bureau { height:34px; width:auto; display:block; flex-shrink:0; }
.marque-bureau .marque { font-family:'Fraunces',serif; font-size:19px; margin:0; }
.marque-bureau .marque span { color: var(--ambre); font-size:14px; display:block; font-family:'IBM Plex Sans',sans-serif; font-weight:600; opacity:0.85; }
.marque-bureau .sous { font-size:11px; opacity:0.65; margin:3px 0 0; }
.stat-bureau { text-align:right; }
.stat-bureau b { font-family:'Fraunces',serif; font-size: 21px; color: var(--ambre); display:block; }
.stat-bureau small { font-size: 11px; opacity: 0.75; }
.btn-deconnexion-bureau {
  display:flex; align-items:center; gap:8px; border:1.5px solid rgba(245,239,226,0.3); background:transparent;
  color: var(--sable); padding:9px 14px; border-radius:10px; cursor:pointer; font-size:12.5px; font-weight:600; font-family:inherit;
}
.btn-deconnexion-bureau svg { width:17px; height:17px; }
.btn-deconnexion-bureau:hover { background: rgba(193,67,43,0.25); border-color: rgba(193,67,43,0.4); }

/* ----- Bureau : rangée d'icônes (une seule ligne, centrée) ----- */
/* Icônes "flottantes" : pas de carte ni de cercle de fond, elles reposent
   directement sur la couleur de la page (--sable). L'état actif se
   distingue par la couleur du libellé + un soulignement, pas par une boîte. */
.bureau-icones {
  display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:stretch;
  gap:10px; padding: 26px 24px; max-width: 1180px; margin: 0 auto;
  overflow-x:auto; overflow-y: visible;
}
.bureau-icones .item-menu {
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  border:none; background:transparent; border-radius:14px; padding:10px 10px 8px;
  cursor:pointer; font-family:inherit; position:relative;
  transition: transform .15s ease;
  flex: 0 0 auto; width: 100px;
}
.bureau-icones .item-menu:hover { transform: translateY(-3px); }
.bureau-icones .item-menu.actif .icone-rond { transform: scale(1.08); }
.bureau-icones .item-menu.actif span:not(.icone-rond):not(.pastille-badge) { color: var(--ambre); }
.bureau-icones .item-menu.actif::after {
  content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:3px; background: var(--ambre);
}
.bureau-icones .icone-rond {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: transparent; transition: transform .15s ease;
}
.bureau-icones .icone-rond svg { width:46px; height:46px; display:block; }
.bureau-icones .item-menu span:not(.icone-rond):not(.pastille-badge) { font-size:12px; font-weight:600; color: var(--encre); line-height:1.25; }
.bureau-icones .pastille-badge {
  position:absolute; top:2px; right:6px; background: var(--alerte); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:20px; padding:1px 7px; line-height:1.5;
}
/* Barre de défilement discrète si la fenêtre est trop étroite pour tout afficher */
.bureau-icones::-webkit-scrollbar { height:6px; }
.bureau-icones::-webkit-scrollbar-thumb { background: #D8CFB6; border-radius:6px; }

/* ----- Popup panneau ----- */

.popup-fond {
  position:fixed; top:0; right:0; bottom:0; left:0; background: rgba(11,27,41,0.55); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:50;
}
.popup-boite {
  background:#fff; border-radius:18px; width:100%; max-width:860px; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.popup-boite .entete {
  background: linear-gradient(160deg, var(--nuit), var(--route)); color: var(--sable);
  padding: 18px 24px; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;
}
.popup-boite .entete .titre-panneau { font-family:'Fraunces',serif; font-size:19px; margin:0; }
.popup-fermer {
  border:none; background: rgba(245,239,226,0.12); color:#fff; width:32px; height:32px; border-radius:50%;
  font-size:15px; cursor:pointer; line-height:1;
}
.popup-fermer:hover { background: rgba(193,67,43,0.5); }
.popup-boite .zone-contenu { overflow-y:auto; flex:1 1 auto; }

/* ----- Adresses réseau (panneau Configuration) ----- */
.liste-adresses { display:flex; flex-direction:column; gap:10px; }
.carte-adresse { border:1.5px solid #E9E1CC; border-radius:12px; padding:12px 14px; }
.carte-adresse .ip { font-family:'Fraunces',serif; font-size:15px; color:var(--nuit); }
.carte-adresse .ip .port { color:#8A8473; font-size:12px; }
.carte-adresse .lien { font-size:11.5px; margin-top:3px; }
.carte-adresse .lien a { color: var(--route); word-break: break-all; }

@media (max-width: 780px) {
  .entete-bureau { flex-wrap:wrap; gap:12px; padding:16px 18px; }
  .bureau-icones { justify-content:flex-start; gap:12px; padding:18px; }
  .bureau-icones .item-menu { width:92px; padding:14px 6px 12px; }
  .bureau-icones .icone-rond { width:42px; height:42px; }
  .bureau-icones .icone-rond svg { width:20px; height:20px; }
  .popup-fond { padding:0; }
  .popup-boite { max-width:100%; max-height:100vh; height:100vh; border-radius:0; }
}

.item-menu {
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  border:none; background:none; color: rgba(245,239,226,0.78); padding:10px 12px;
  border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  position: relative;
}
.item-menu svg { width:19px; height:19px; flex-shrink:0; }
.item-menu:hover { background: rgba(245,239,226,0.07); color:#fff; }
.item-menu.actif { background: var(--ambre); color: var(--nuit); }
.pastille-badge {
  margin-left:auto; background: var(--alerte); color:#fff; font-size:10.5px; font-weight:700;
  border-radius:20px; padding:1px 7px; line-height:1.5;
}
.item-menu.actif .pastille-badge { background: var(--nuit); color: var(--ambre); }

.zone-contenu { flex:1; min-width:0; }

.entete {
  background: linear-gradient(160deg, var(--nuit), var(--route));
  color: var(--sable);
  padding: 22px 28px;
  display: flex; justify-content: space-between; align-items: center;
}
.entete .titre-panneau { font-family:'Fraunces',serif; font-size: 21px; margin:0; }
.entete .stat { text-align:right; }
.entete .stat b { font-family:'Fraunces',serif; font-size: 22px; color: var(--ambre); display:block; }
.entete .stat small { font-size: 11px; opacity: 0.75; }

.panneau { display:none; }
.panneau.actif { display:block; }

.contenu { display:grid; grid-template-columns: 1.3fr 1fr; gap: 0; }
@media (max-width: 900px) { .contenu { grid-template-columns: 1fr; } }

.colonne { padding: 24px 28px; }
.colonne h2 { font-family:'Fraunces',serif; font-size:18px; margin: 0 0 16px; }
.colonne.pleine-largeur { max-width: 700px; margin: 0 auto; }
.note { font-size:12.5px; color:#8A8473; margin:-10px 0 16px; }

.filtre-tabs { display:flex; gap:8px; margin-bottom:16px; flex-wrap: wrap; }
.filtre-tabs button {
  border:1.5px solid #E4DCC8; background:#fff; border-radius: 20px;
  padding: 6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; color:#6B6659;
}
.filtre-tabs button.actif { background: var(--nuit); color: #fff; border-color: var(--nuit); }

@media (max-width: 780px) {
  .contenu { grid-template-columns: 1fr; }
}

.carte-resa {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 14px 16px; margin-bottom: 12px;
}
.carte-resa .haut { display:flex; justify-content:space-between; align-items:flex-start; }
.carte-resa .identite-client { display:flex; align-items:center; gap:10px; }
.photo-client-resa {
  width:38px; height:38px; border-radius:50%; object-fit:cover; background:#E4DCC8; flex-shrink:0;
}
.photo-client-resa.sans-photo {
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#6B6659;
}
.carte-resa .numero { font-family:'Fraunces',serif; font-size:15px; color:var(--nuit); }
.carte-resa .client { font-size:13px; font-weight:600; margin-top:2px; }
.carte-resa .details { font-size:12.5px; color:#6B6659; margin-top:6px; line-height:1.5; }
.carte-resa .bas { display:flex; justify-content:space-between; align-items:center; margin-top:12px; }
.carte-resa .montant { font-family:'Fraunces',serif; font-size:16px; color:var(--nuit); }

.badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.badge.en_attente { background:#FCEFD9; color:#8A5A0B; }
.badge.a_larrivee { background:#E7EEF4; color:var(--route); }
.badge.declare { background:#FBE4DF; color:#B14A1B; }
.badge.paye { background:#E2F3EA; color:#1E6B47; }
.badge.confirmee { background:#E7EEF4; color:var(--route); }
.badge.en_route { background:#FCEFD9; color:#8A5A0B; }
.badge.terminee { background:#E2F3EA; color:#1E6B47; }
.badge.annulee { background:#FBE4DF; color:var(--alerte); }
.badge.en_preparation { background:#FCEFD9; color:#8A5A0B; }
.badge.prete { background:#E7EEF4; color:var(--route); }
.badge.livree { background:#E2F3EA; color:#1E6B47; }

.btn-supprimer { background:#FBE4DF; color:var(--alerte); }

.actions { display:flex; gap:8px; flex-wrap: wrap; }
.actions button {
  border:none; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600; cursor:pointer;
}
.btn-encaisser { background: var(--acacia); color:#fff; }
.btn-arrivee { background:#fff; color: var(--route); border:1.5px solid var(--route) !important; }
.btn-suivre { background: var(--nuit); color:#fff; }
.btn-statut { background:#EDE6D6; color:var(--encre); }
.btn-demarrer-pret { background: var(--acacia); color: #fff; font-weight: 700; }
.btn-demarrer-attente { background: #FBE4DF; color: var(--alerte); font-weight: 600; cursor: not-allowed; opacity: 0.85; }
.btn-recu { background: var(--ambre); color: var(--nuit); }
.btn-whatsapp { background: #25D366; color: #fff; }

.panneau-suivi { position: sticky; top: 0; }
#carte-admin { width:100%; height:360px; border-radius:14px; background:#E4DCC8; }
.select-resa-suivi { width:100%; padding:10px 12px; border-radius:10px; border:1.5px solid #E4DCC8; margin-bottom:12px; font-family:inherit; }

.notif-log { background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; padding:14px 16px; margin-top:20px; max-height:180px; overflow-y:auto; font-size:12px; color:#6B6659; }
.notif-log div { padding: 4px 0; border-bottom: 1px dashed #EEE7D5; }

.vide { text-align:center; color:#9A9484; padding: 30px 0; font-size:13.5px; }

/* ---------- ACCÈS CLIENT / COMPTES / DEVIS ---------- */
.carte-qr {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 20px; text-align:center;
  width: fit-content; max-width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.carte-qr #qr-code {
  display:flex; align-items:center; justify-content:center;
  width:168px; height:168px; margin-bottom:12px;
  background:#fff; border-radius:8px;
}
.carte-qr #qr-code canvas { display:block; border-radius:4px; }
.qr-lien {
  font-size:11.5px; color:#6B6659; word-break: break-all;
  max-width: 220px; line-height: 1.5;
}

#liste-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.carte-client {
  flex: 1 1 190px;
  max-width: 220px;
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 20px 14px 16px; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px; position:relative; overflow:hidden;
}
.carte-client::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--ambre), var(--nuit));
}
.carte-client img, .carte-client .sans-photo {
  width:56px; height:56px; border-radius:50%; object-fit:cover; background:#E4DCC8; flex-shrink:0;
  margin-bottom:2px; border: 2px solid var(--sable); box-shadow: 0 0 0 1.5px #E9E1CC;
}
.carte-client .sans-photo { display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:var(--nuit); }
.carte-client .nom { font-size:14px; font-weight:700; color:var(--nuit); line-height:1.3; }
.carte-client .tel { font-size:12px; color:#6B6659; }
.carte-client .depuis-badge {
  margin-top:6px; font-size:10.5px; color:#8A5A0B; background:#FCEFD9;
  border-radius:20px; padding:3px 10px; font-weight:600; letter-spacing:.2px;
}

.carte-demande {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 12px 14px; margin-bottom: 10px;
}
.carte-demande .service { font-size:13.5px; font-weight:600; color:var(--nuit); }
.carte-demande .client { font-size:12.5px; margin-top:2px; }
.carte-demande .details { font-size:12px; color:#6B6659; margin-top:6px; }
.carte-demande .bas { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
.badge.nouvelle { background:#FCEFD9; color:#8A5A0B; }
.badge.traitee { background:#E7EEF4; color:var(--route); }
.badge.caisse { background:#EAF4EF; color:var(--acacia); margin-left:6px; font-size:10px; vertical-align:middle; }
.badge.cloturee { background:#E2F3EA; color:#1E6B47; }

.carte-client { cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.carte-client:hover { border-color: var(--ambre); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(18,40,61,0.12); }

/* ---------- MODALE FICHE CLIENT ---------- */
.modale-fond {
  position: fixed; top:0; right:0; bottom:0; left:0; background: rgba(18,40,61,0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto; z-index: 100;
}
.modale-boite {
  background: #fff; border-radius: 16px; padding: 26px 26px 22px;
  max-width: 460px; width: 100%; position: relative;
}
.modale-fermer {
  position: absolute; top: 14px; right: 16px; border: none; background: none;
  font-size: 16px; color: #6B6659; cursor: pointer;
}
.modale-entete { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.modale-entete img, .modale-entete .sans-photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #E4DCC8; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px; color: #6B6659;
}
.modale-entete .nom { font-family: 'Fraunces', serif; font-size: 18px; color: var(--nuit); }
.modale-entete .tel { font-size: 12.5px; color: #6B6659; }
.modale-entete .depuis { font-size: 11.5px; color: #9A9484; margin-top: 2px; }
.modale-boite h3 { font-family:'Fraunces', serif; font-size: 14.5px; margin: 18px 0 10px; }
.btn-supprimer-client {
  width: 100%; margin-top: 20px; padding: 11px; border: none; border-radius: 10px;
  background: #FBE4DF; color: var(--alerte); font-weight: 600; font-size: 13px; cursor: pointer;
}

/* ---------- CAISSE (POS) ---------- */
.pos-zone { display:grid; grid-template-columns: 360px 1fr; gap:18px; align-items:start; }
@media (max-width: 860px) { .pos-zone { grid-template-columns: 1fr; } }

/* --- Ticket (gauche) --- */
.pos-panier {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; padding:16px;
  position: sticky; top:12px; display:flex; flex-direction:column;
}
.pos-panier-entete { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.pos-panier-entete h3 { margin:0; font-family:'Fraunces',serif; color: var(--nuit); font-size:16px; white-space:nowrap; }
.pos-panier-entete input {
  flex:1; min-width:0; padding:7px 10px; border-radius:8px; border:1.5px solid #E9E1CC;
  font-size:12px; font-family:inherit; text-align:right;
}

.pos-lignes { min-height:120px; max-height:280px; overflow-y:auto; margin:4px 0 10px; display:flex; flex-direction:column; gap:8px; }
.pos-lignes .vide { font-size:12.5px; color:#9A9484; text-align:center; padding:24px 8px; }
.pos-ligne { border-bottom:1px solid #EDE6D6; padding-bottom:8px; }
.pos-ligne-nom { font-size:12.5px; font-weight:600; color: var(--encre); }
.pos-ligne-controles { display:flex; align-items:center; gap:8px; margin-top:4px; }
.pos-ligne-controles button { width:24px; height:24px; border-radius:6px; border:1px solid #E9E1CC; background:#EDE6D6; cursor:pointer; font-weight:700; flex-shrink:0; }
.pos-ligne-controles span { font-size:12.5px; min-width:14px; text-align:center; }
.pos-ligne-sous-total { margin-left:auto; font-weight:700; color: var(--nuit); font-size:12.5px; }
.pos-ligne-retirer { background:none !important; border:none !important; color: var(--alerte); cursor:pointer; font-size:13px; width:auto !important; }

.pos-recap { border-top:1.5px solid #EDE6D6; padding-top:8px; margin-top:2px; }
.pos-recap-ligne { display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-size:12.5px; color:#6B6659; }
.pos-recap-ligne b { color: var(--nuit); font-weight:700; }
.pos-recap-remise .pos-remise-champ { display:flex; align-items:center; gap:5px; }
.pos-recap-remise input {
  width:78px; padding:5px 7px; border-radius:7px; border:1.5px solid #E9E1CC; text-align:right;
  font-size:12.5px; font-family:inherit;
}
.pos-recap-remise span:last-child { font-size:11.5px; color:#9A9484; }
.pos-recap-total { border-top:1.5px solid var(--nuit); margin-top:4px; padding-top:9px; }
.pos-recap-total span { font-size:13px; font-weight:600; color: var(--nuit); }
.pos-recap-total b { font-family:'Fraunces',serif; font-size:21px; }

.pos-modes-paiement { display:flex; gap:6px; margin:12px 0 8px; }
.pos-modes-paiement button {
  flex:1; padding:8px 4px; border-radius:8px; border:1.5px solid #E9E1CC; background:#fff;
  font-size:11.5px; font-weight:600; cursor:pointer; font-family:inherit;
}
.pos-modes-paiement button.actif { background: var(--nuit); color:#fff; border-color: var(--nuit); }

.btn-encaisser-pos {
  width:100%; padding:13px; border:none; border-radius:12px; background: var(--acacia); color:#fff;
  font-weight:700; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-family:inherit;
}
.btn-encaisser-pos span { font-size:12.5px; font-weight:600; opacity:.92; }
.btn-encaisser-pos b { font-family:'Fraunces',serif; font-size:16px; }
.btn-encaisser-pos:disabled { background:#C9C2AE; cursor:not-allowed; }

.pos-actions-bar { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.pos-action {
  flex:1; min-width:70px; padding:9px 6px; border-radius:9px; border:1.5px solid #E9E1CC; background:#fff;
  color: var(--route); font-weight:600; font-size:11.5px; cursor:pointer; font-family:inherit; position:relative;
}
.pos-action:hover { background:#F3F0E6; }
.pos-action-annuler { color: var(--alerte); border-color:#F3D3CC; }
.pos-notes-point {
  position:absolute; top:4px; right:6px; width:6px; height:6px; border-radius:50%; background: var(--alerte);
}

/* --- Catalogue (droite) --- */
.pos-catalogue { min-width:0; }
.pos-recherche { position:relative; margin-bottom:12px; }
.pos-recherche-icone { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9A9484; font-size:14px; }
.pos-recherche input {
  width:100%; padding:10px 12px 10px 32px; border-radius:10px; border:1.5px solid #E9E1CC;
  font-size:13px; font-family:inherit;
}

.pos-tabs-categories { display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:14px; }
.pos-tabs-categories button {
  background:none; border:none; border-bottom:2.5px solid transparent; padding:4px 2px 8px;
  font-size:12.5px; font-weight:600; color:#8A8371; cursor:pointer; font-family:inherit;
}
.pos-tabs-categories button.actif { color: var(--couleur-categorie, var(--nuit)); border-bottom-color: var(--couleur-categorie, var(--nuit)); }

.pos-grille { display:grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap:12px; }
.pos-article {
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left;
  border:1.5px solid #E9E1CC; background:#fff; border-radius:12px; padding:0 0 10px; cursor:pointer;
  font-family:inherit; transition: border-color .15s, transform .1s; overflow:hidden;
}
.pos-article:hover { border-color: var(--ambre); transform: translateY(-2px); }
.pos-article:active { transform: translateY(0); background: var(--sable); }
.pos-article-visuel {
  width:100%; height:76px; background-size:cover; background-position:center; position:relative;
  display:flex; align-items:center; justify-content:center; margin-bottom:8px;
}
.pos-article-initiale { font-family:'Fraunces',serif; font-size:26px; font-weight:700; }
.pos-article-ruban {
  position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 16px 16px 0; border-color:transparent currentColor transparent transparent;
  opacity:.85;
}
.pos-article-prix { font-size:12.5px; color: var(--acacia); font-weight:700; padding:0 10px; }
.pos-article-nom { font-size:12px; font-weight:600; color: var(--nuit); line-height:1.25; padding:0 10px; }


/* ---------- TARIFS ---------- */
.carte-tarif {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 14px 16px; margin-bottom: 10px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.carte-tarif .infos { flex:1; min-width:180px; }
.carte-tarif .libelle { font-size:13.5px; font-weight:600; color: var(--nuit); }
.carte-tarif .cle { font-size:11px; color:#9A9484; margin-top:2px; }
.carte-tarif .champ-prix { display:flex; align-items:center; gap:8px; }
.carte-tarif input {
  width:120px; padding:8px 10px; border-radius:8px; border:1.5px solid #E4DCC8;
  font-family:inherit; font-size:13px; text-align:right;
}
.carte-tarif .unite { font-size:12px; color:#6B6659; min-width:46px; }
.carte-tarif .btn-enregistrer {
  border:none; background: var(--acacia); color:#fff; font-weight:600; font-size:12px;
  padding:8px 14px; border-radius:8px; cursor:pointer;
}
.carte-tarif .confirmation { font-size:11.5px; color: var(--acacia); font-weight:600; opacity:0; transition: opacity .2s; }
.carte-tarif .confirmation.visible { opacity:1; }

/* ---------- DÉPENSES ---------- */
.carte-formulaire {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; padding:18px 18px 14px; margin-bottom:22px;
}
.grille-formulaire { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 620px) { .grille-formulaire { grid-template-columns: 1fr; } }
.carte-formulaire .champ { margin-bottom:12px; }
.carte-formulaire label { display:block; font-size:11.5px; font-weight:600; color:#6B6659; margin-bottom:5px; }
.carte-formulaire input, .carte-formulaire select {
  width:100%; padding:9px 11px; border-radius:9px; border:1.5px solid #E4DCC8; font-family:inherit; font-size:13px;
}
.btn-ajouter {
  border:none; background: var(--nuit); color:#fff; font-weight:700; font-size:13px;
  padding:11px 18px; border-radius:9px; cursor:pointer; width:100%;
}
.btn-ajouter:hover { background: var(--route); }
.btn-annuler-edition-menu {
  border:1.5px solid #E9E1CC; background:#fff; color: var(--alerte); font-weight:600; font-size:12.5px;
  padding:9px 18px; border-radius:9px; cursor:pointer; width:100%; margin-top:8px; font-family:inherit;
}

.total-depenses {
  background: var(--sable); border:1.5px dashed #D8CDAF; border-radius:12px;
  padding: 12px 16px; font-size:13.5px; font-weight:700; color: var(--nuit); margin-bottom:16px;
}

.carte-depense {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px;
  padding: 12px 16px; margin-bottom: 10px; display:flex; align-items:center; gap:12px;
}
.carte-depense .categorie {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  background: var(--sable); color: var(--nuit); padding:4px 9px; border-radius:8px; flex-shrink:0;
}
.carte-depense .infos { flex:1; min-width:0; }
.carte-depense .desc { font-size:13px; font-weight:600; }
.carte-depense .date { font-size:11.5px; color:#9A9484; margin-top:2px; }
.carte-depense .montant { font-family:'Fraunces',serif; font-size:15px; color: var(--alerte); white-space:nowrap; }
.carte-depense .btn-supprimer {
  border:none; background:none; color:#9A9484; cursor:pointer; font-size:15px; padding:4px;
}
.carte-depense .btn-supprimer:hover { color: var(--alerte); }

/* ----- Widget flottant : état de connexion au serveur (petit, compact) ----- */
.widget-serveur {
  position: fixed; bottom: 14px; right: 14px; z-index: 900;
  display: flex; align-items: center; gap: 0;
  background: var(--nuit); color: var(--sable);
  border-radius: 999px; box-shadow: 0 6px 14px rgba(11,27,41,0.3);
  cursor: pointer; user-select: none; font-family: inherit;
  padding: 7px; max-width: 26px; overflow: hidden;
  transition: max-width .2s ease, padding .2s ease;
}
.widget-serveur.ouvert { max-width: 190px; padding: 7px 12px 7px 8px; }
.widget-serveur .point-serveur {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #8A8473; transition: background .2s ease;
}
.widget-serveur .point-serveur.connecte { background: var(--acacia); box-shadow: 0 0 0 0 rgba(23,162,75,0.55); animation: pulse-serveur 2s infinite; }
.widget-serveur .point-serveur.deconnecte { background: var(--alerte); }
.widget-serveur .texte-serveur {
  white-space: nowrap; font-size: 11px; font-weight: 600; margin-left: 0; max-width: 0;
  opacity: 0; transition: opacity .15s ease, max-width .2s ease, margin-left .2s ease;
}
.widget-serveur.ouvert .texte-serveur { opacity: 1; max-width: 170px; margin-left: 7px; }
@keyframes pulse-serveur {
  0% { box-shadow: 0 0 0 0 rgba(23,162,75,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(23,162,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,162,75,0); }
}
/* Masqué sur mobile : uniquement visible sur poste bureau */
@media (max-width: 780px) {
  .widget-serveur { display: none !important; }
}

/* ---------- ACCÈS QR CODE : BASCULE HTTPS ---------- */
.avertissement-qr {
  background:#FFF4E5; border:1.5px solid var(--ambre); color:#7A4A0B; font-size:13px;
  font-weight:600; padding:11px 14px; border-radius:10px; margin:-6px 0 16px; line-height:1.5;
}
.selecteur-securite-qr { margin: -6px 0 18px; }
.interrupteur-https {
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-weight:600;
  font-size:13.5px; color: var(--nuit); user-select:none;
}
.interrupteur-https input[type="checkbox"] {
  appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px;
  background:#E9E1CC; border:1.5px solid #E9E1CC; position:relative; cursor:pointer; transition: background .15s;
  flex-shrink:0;
}
.interrupteur-https input[type="checkbox"]::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; transition: transform .15s; box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.interrupteur-https input[type="checkbox"]:checked { background: var(--acacia); border-color: var(--acacia); }
.interrupteur-https input[type="checkbox"]:checked::after { transform: translateX(16px); }
.note-https { margin-top:8px; margin-bottom:0; }

/* ---------- STATISTIQUES / RAPPORTS ---------- */
.selecteur-periode { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.btn-periode {
  border:1.5px solid #E9E1CC; background:#fff; color: var(--nuit); font-weight:600; font-size:13px;
  padding:9px 16px; border-radius:999px; cursor:pointer; font-family:inherit; transition: background .15s, color .15s;
}
.btn-periode:hover { background: var(--sable); }
.btn-periode.actif { background: var(--nuit); color:#fff; border-color: var(--nuit); }

.grille-stats { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; margin-bottom:8px; }
@media (max-width: 900px) { .grille-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .grille-stats { grid-template-columns: 1fr; } }
.carte-stat {
  background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; padding:16px 18px;
}
.carte-stat-label { font-size:11.5px; font-weight:600; color:#6B6659; text-transform:uppercase; letter-spacing:0.03em; }
.carte-stat-valeur { font-family:'Fraunces', serif; font-size:24px; font-weight:600; color: var(--nuit); margin:6px 0 4px; }
.carte-stat-detail { font-size:11.5px; color:#9A9484; }

#tableau-stats-jours { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius:14px; }
.tableau-stats {
  width:100%; min-width: 420px; border-collapse: collapse; background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; overflow:hidden;
}
.tableau-stats th, .tableau-stats td { padding:10px 14px; text-align:left; font-size:13px; border-bottom:1px solid #F1ECDF; }
.tableau-stats th { background: var(--sable); font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color:#6B6659; }
.tableau-stats tr:last-child td { border-bottom:none; }
.tableau-stats td.chiffre { font-weight:600; color: var(--nuit); }

/* ----- Bandeau : installer l'application sur l'écran d'accueil ----- */
.bandeau-install {
  position: fixed; left: calc(10px + env(safe-area-inset-left)); right: calc(10px + env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 950;
  max-width: 460px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--nuit); color: var(--sable);
  border-radius: 14px; padding: 10px 10px 10px 12px;
  box-shadow: 0 10px 26px rgba(11,27,41,0.35);
}
.bandeau-install-logo { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; display: block; }
.bandeau-install-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bandeau-install-texte b { font-size: 12.5px; line-height: 1.2; }
.bandeau-install-texte span { font-size: 10.5px; opacity: 0.75; line-height: 1.25; }
.bandeau-install-btn {
  background: var(--ambre); color: var(--nuit); border: none; border-radius: 8px;
  padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-family: inherit;
}
.bandeau-install-fermer {
  background: transparent; border: none; color: var(--sable); opacity: 0.55; font-size: 13px;
  cursor: pointer; padding: 4px 5px; flex-shrink: 0; line-height: 1;
}

/* ----- Modale : instructions installation iOS / iPadOS ----- */
.popup-install-fond {
  position: fixed; inset: 0; background: rgba(18,40,61,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 960;
}
.popup-install-boite {
  background: #FFFFFF; border-radius: 16px; max-width: 320px; width: 100%;
  padding: 26px 22px 22px; position: relative; text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.popup-install-logo { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 10px; display: block; }
.popup-install-boite h3 { font-family: 'Fraunces', serif; font-size: 17px; margin: 0 0 14px; color: var(--nuit); }
.popup-install-boite ol { text-align: left; padding-left: 20px; margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.popup-install-boite p { font-size: 11.5px; color: #6B6659; margin: 0; }
.popup-install-fermer {
  position: absolute; top: 10px; right: 10px; border: none; background: #F1ECDF; color: var(--encre);
  width: 26px; height: 26px; border-radius: 50%; font-size: 12px; cursor: pointer; line-height: 1;
}

/* ---------- Statut du chauffeur (Libre / En course), dans l'entête ---------- */
.badge-statut-chauffeur {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.badge-statut-chauffeur.libre { background: #E2F3EA; color: #1E6B47; }
.badge-statut-chauffeur.en_course { background: #FCEFD9; color: #8A5A0B; }
@media (max-width: 780px) {
  .badge-statut-chauffeur { font-size: 11px; padding: 6px 10px; }
}

/* ---------- TABLEAU DE BORD ---------- */
.popup-boite:has(#panneau-statistiques.actif) { max-width: 1080px; }
.colonne.pleine-largeur.tdb { max-width: none; padding: 18px 22px 26px; }
.tdb-barre { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.tdb-barre .selecteur-periode { margin-bottom:0; }
.btn-tdb-export {
  border:1.5px solid var(--nuit); background:#fff; color:var(--nuit); font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:999px; cursor:pointer; font-family:inherit;
}
.btn-tdb-export:hover { background: var(--nuit); color:#fff; }
.tdb-periode-label { font-size:12px; color:#8A8473; margin:4px 2px 14px; text-transform:capitalize; }

.tdb-alertes { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.alerte-tdb {
  display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  border:1.5px solid #E9E1CC; background:#fff; border-radius:11px; padding:9px 12px;
  font-family:inherit; font-size:12.5px; color:var(--encre); cursor:pointer;
}
.alerte-tdb:hover { background: var(--sable); }
.alerte-tdb .alerte-pastille { width:9px; height:9px; border-radius:50%; flex-shrink:0; background:#9AA5B1; }
.alerte-tdb.alerte { border-color:#F0C4BC; background:#FFF6F4; }
.alerte-tdb.alerte .alerte-pastille { background: var(--alerte); }
.alerte-tdb.attention { border-color:#F7D9B5; background:#FFF9F1; }
.alerte-tdb.attention .alerte-pastille { background: var(--ambre); }
.alerte-tdb.info .alerte-pastille { background: var(--route); }
.tdb-tout-va-bien { background:#EEF8F1; border:1.5px solid #CBE8D4; color:var(--nuit); border-radius:11px; padding:9px 12px; font-size:12.5px; font-weight:600; margin-bottom:16px; }

.grille-stats { grid-template-columns: repeat(4, 1fr); gap:12px; }
.carte-stat { padding:13px 14px; min-width:0; }
.carte-stat-valeur { font-size:20px; overflow-wrap:anywhere; }
.carte-stat-forte { background: linear-gradient(160deg, var(--nuit), var(--route)); border-color: var(--nuit); }
.carte-stat-forte .carte-stat-label { color: rgba(250,250,247,0.75); }
.carte-stat-forte .carte-stat-valeur { color:#fff; }
.carte-stat-forte .carte-stat-detail { color: rgba(250,250,247,0.8); }
.carte-stat.negatif .carte-stat-valeur { color: var(--alerte); }
.var { font-weight:600; }
.var.bon { color: var(--acacia); }
.var.mauvais { color: var(--alerte); }
.var.neutre { color:#9A9484; font-weight:500; }
.carte-stat-forte .var.bon, .carte-stat-forte .var.mauvais, .carte-stat-forte .var.neutre { color:#fff; opacity:0.9; }

.tdb-bloc { background:#fff; border:1.5px solid #E9E1CC; border-radius:14px; padding:14px 16px; margin-top:12px; min-width:0; }
.tdb-bloc-titre { font-family:'Fraunces',serif; font-size:14.5px; color:var(--nuit); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.tdb-legende { font-family:'IBM Plex Sans',sans-serif; font-size:11px; color:#6B6659; font-weight:500; }
.tdb-legende i { display:inline-block; width:9px; height:9px; border-radius:3px; margin:0 4px 0 8px; vertical-align:middle; }
.tdb-legende .pt-ca { background:#17A24B; } .tdb-legende .pt-dep { background:#F5821F; }
#tdb-graphique svg { width:100%; height:auto; display:block; }
.tdb-deux { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.tdb-deux .tdb-bloc { margin-top:12px; }

.ligne-repartition { margin-bottom:9px; }
.ligne-repartition:last-child { margin-bottom:0; }
.ligne-repartition-tete { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:3px; }
.ligne-repartition-tete b { color:var(--nuit); font-weight:600; white-space:nowrap; }
.ligne-repartition-tete em { font-style:normal; color:#9A9484; font-weight:500; margin-left:3px; }
.barre-fond { background:#F1ECDF; border-radius:999px; height:7px; overflow:hidden; }
.barre-rempli { height:100%; border-radius:999px; }

.pastilles-statuts { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.pastille-statut { text-align:center; border-radius:10px; padding:9px 4px; background:#F4F1E8; }
.pastille-statut b { display:block; font-family:'Fraunces',serif; font-size:20px; color:var(--nuit); }
.pastille-statut span { font-size:10.5px; color:#6B6659; }
.pastille-statut.terminee { background:#EEF8F1; }
.pastille-statut.en_route { background:#FFF3E6; }
.pastille-statut.annulee { background:#FBE4DF; }

.tdb-table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tdb-bloc .tableau-stats { border:none; border-radius:0; min-width:0; }
.tdb-bloc .tableau-stats th, .tdb-bloc .tableau-stats td { padding:7px 8px; font-size:12px; vertical-align:top; }
.tdb-bloc .tableau-stats small { color:#9A9484; font-size:10.5px; }
.tdb-bloc .tableau-stats small.ok { color:var(--acacia); font-weight:600; }
.tdb-bloc .tableau-stats small.attente { color:var(--ambre); font-weight:600; }
.tdb-bloc .tableau-stats td.neg { color:var(--alerte); }
.tdb .vide { color:#9A9484; font-size:12.5px; padding:6px 2px; }

@media (max-width: 900px) { .grille-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .tdb-deux { grid-template-columns: 1fr; } .colonne.pleine-largeur.tdb { padding:14px 12px 22px; } }
@media (max-width: 380px) { .grille-stats { grid-template-columns: 1fr 1fr; gap:8px; } .carte-stat-valeur { font-size:17px; } .pastilles-statuts { grid-template-columns: repeat(2, 1fr); } }
.grille-formulaire.grille-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .grille-formulaire.grille-2 { grid-template-columns: 1fr; } }

/* ================= MOBILE : zones de sécurité (encoche, barre d'accueil) ================= */
.ecran-connexion { min-height: 100dvh; padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.entete-bureau { padding-top: calc(18px + env(safe-area-inset-top)); padding-left: calc(28px + env(safe-area-inset-left)); padding-right: calc(28px + env(safe-area-inset-right)); }
.popup-fond { padding-top: calc(24px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (max-width: 780px) {
  .entete-bureau { padding-left: calc(14px + env(safe-area-inset-left)); padding-right: calc(14px + env(safe-area-inset-right)); }
  .popup-fond { padding-left: calc(8px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); }
  .popup-boite { max-height: 92dvh; }
}