/* ============================================================
   RestoLounge - Design system
   Police: Playfair Display (titres) + Poppins (texte)
   Palette: bordeaux profond + or chaud + creme
   ============================================================ */

:root{
  /* Palette "plage & vacances" - lagon turquoise, corail coucher de soleil, sable */
  --bordeaux: #0f7a85;        /* lagon (remplace le bordeaux) */
  --bordeaux-dark: #0a5760;   /* lagon profond */
  --or: #ff6f4f;              /* corail (CTA) */
  --or-clair: #ffd166;        /* jaune soleil */
  --creme: #fffaf1;           /* sable clair */
  --creme-carte: #ffffff;
  --charbon: #1f3a3d;         /* texte, bleu-nuit doux */
  --gris-texte: #5f7a7d;
  --vert-ok: #2f9e6e;
  --orange-attente: #f0923c;
  --rouge-alerte: #e6584f;
  --turquoise: #2dd4c8;
  --ombre: 0 8px 24px rgba(15, 90, 96, 0.10);
  --ombre-forte: 0 16px 40px rgba(15, 90, 96, 0.18);
  --rayon: 16px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0;
  background: var(--creme);
  background-image: radial-gradient(1200px 400px at 50% -200px, rgba(45,212,200,0.10), transparent 70%);
  color: var(--charbon);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,.logo,.brand{
  font-family: 'Playfair Display', serif;
}

a{ color: inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }

::selection{ background: var(--or-clair); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: linear-gradient(115deg, var(--bordeaux) 0%, var(--turquoise) 100%);
  color: #fff;
  padding: 18px 24px 26px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow: var(--ombre);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q150 24 300 12 T600 12 T900 12 T1200 12 V0 H0 Z' fill='%230f7a85' fill-opacity='0.18'/%3E%3C/svg%3E") repeat-x; background-size: 300px 14px;
  pointer-events:none;
}
.site-header .brand{
  font-size: 26px;
  letter-spacing: 0.5px;
  display:flex; align-items:center; gap:10px;
}
.site-header .brand small{
  display:block;
  font-family:'Poppins', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--or-clair);
  font-weight: 400;
}
.site-header nav a, .site-header nav button{
  color:#fff; background:transparent; border: 1px solid rgba(255,255,255,0.35);
  padding: 8px 16px; border-radius: 999px; font-size: 14px; margin-left:8px;
  transition: all .2s ease;
}
.site-header nav a:hover, .site-header nav button:hover{
  background: rgba(255,255,255,0.15);
}

/* ---------- Layout ---------- */
.container{ max-width: 1100px; margin: 0 auto; padding: 24px; }
.hero{
  text-align:center; padding: 56px 24px 28px; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:520px; height:320px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(204,154,58,0.16), rgba(204,154,58,0) 70%);
  pointer-events:none;
}
.hero .kicker{
  display:inline-block; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color: var(--or); font-weight:600; margin-bottom:10px; position:relative;
}
.hero h1{ font-size: 42px; margin: 0 0 14px; color: var(--bordeaux); position:relative; }
.hero .divider{
  width:64px; height:3px; margin:0 auto 18px; border-radius:2px;
  background: linear-gradient(90deg, var(--or-clair), var(--or));
}
.hero p{ color: var(--gris-texte); font-size: 16px; max-width: 480px; margin: 0 auto; position:relative; }

/* ---------- Skeleton (chargement) ---------- */
.skeleton-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: 20px; padding: 0 24px 60px;
}
.skeleton-card{
  background: var(--creme-carte); border-radius: var(--rayon); overflow:hidden; box-shadow: var(--ombre);
}
.skeleton-img{ width:100%; height:160px; background: linear-gradient(100deg, #efe6d3 30%, #f7f0e0 50%, #efe6d3 70%); background-size:200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton-line{ height:12px; margin: 14px 16px; border-radius:6px; background: linear-gradient(100deg, #efe6d3 30%, #f7f0e0 50%, #efe6d3 70%); background-size:200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton-line.short{ width:40%; }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ---------- Categories nav ---------- */
.cat-tabs{
  display:flex; gap:10px; overflow-x:auto; padding: 10px 24px 20px;
  scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar{ display:none; }
.cat-tab{
  flex:0 0 auto; background:#fff; border:1px solid #e9ddc9; color: var(--charbon);
  padding:10px 18px; border-radius:999px; font-size:14px; font-weight:500;
  transition: all .2s ease; white-space:nowrap;
}
.cat-tab.active, .cat-tab:hover{
  background: var(--bordeaux); color:#fff; border-color: var(--bordeaux);
}

/* ---------- Menu grid ---------- */
.menu-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: 20px; padding: 0 24px 60px;
}
.plat-card{
  background: var(--creme-carte); border-radius: var(--rayon); overflow:hidden;
  box-shadow: var(--ombre); transition: transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column;
}
.plat-card:hover{ transform: translateY(-4px); box-shadow: var(--ombre-forte); }
.plat-img{
  width:100%; height: 160px; object-fit: cover; background: linear-gradient(135deg,#eee,#f7f1e6);
}
.plat-img.placeholder{
  display:flex; align-items:center; justify-content:center; font-size: 40px;
}
.plat-img.placeholder.c0{ background: linear-gradient(135deg, #bef0ea, #6fd8cb); }
.plat-img.placeholder.c1{ background: linear-gradient(135deg, #ffd9c7, #ff9f7d); }
.plat-img.placeholder.c2{ background: linear-gradient(135deg, #ffe9b0, #ffcf5c); }
.plat-img.placeholder.c3{ background: linear-gradient(135deg, #c9f2ea, #7fd9c4); }
.plat-img.placeholder.c4{ background: linear-gradient(135deg, #ffd6d1, #ff8f87); }
.plat-img.placeholder.c5{ background: linear-gradient(135deg, #d7f0ff, #8ed0f0); }
.plat-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.plat-body h3{ margin:0; font-size:18px; color: var(--bordeaux); }
.plat-body p{ margin:0; font-size:13px; color: var(--gris-texte); line-height:1.4; flex:1; }
.plat-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; }
.plat-price{ font-weight:600; color: var(--charbon); font-size: 16px; }
.plat-price .fcfa{ font-size:11px; color:var(--gris-texte); font-weight:400; }

.btn{
  border:none; border-radius: 999px; padding: 10px 18px; font-weight:600; font-size:14px;
  transition: all .2s ease;
}
.btn-or{ background: var(--or); color:#fff; }
.btn-or:hover{ background:#b5852f; }
.btn-bordeaux{ background: var(--bordeaux); color:#fff; }
.btn-bordeaux:hover{ background: var(--bordeaux-dark); }
.btn-outline{ background:transparent; border:1px solid var(--bordeaux); color:var(--bordeaux); }
.btn-ghost{ background:#f2ece0; color:var(--charbon); }
.btn-danger{ background: var(--rouge-alerte); color:#fff; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:6px 12px; font-size:12px; }
.btn-block{ width:100%; }

.stepper{ display:flex; align-items:center; gap:10px; }
.stepper button{
  width:30px; height:30px; border-radius:50%; border:1px solid #e0d3b8; background:#fff;
  font-size:16px; line-height:1;
}
.stepper span{ min-width:18px; text-align:center; font-weight:600; }

/* ---------- Cart floating button + panel ---------- */
.cart-fab{
  position: fixed; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); right:20px; z-index:50;
  background: var(--bordeaux); color:#fff; border:none; border-radius:999px;
  padding: 16px 24px; box-shadow: var(--ombre-forte); font-weight:600; font-size:15px;
  display:flex; align-items:center; gap:10px;
}
.cart-fab .badge{
  background: var(--or); color:#fff; border-radius:999px; padding:2px 9px; font-size:12px;
}

.overlay{
  position: fixed; inset:0; background: rgba(42,32,24,0.5); z-index:60;
  display:none; align-items:flex-end; justify-content:center;
}
.overlay.open{ display:flex; }
.panel{
  background: var(--creme); width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
  border-radius: 24px 24px 0 0; padding: 24px; animation: slideUp .25s ease;
}
@media (min-width: 700px){
  .overlay{ align-items:center; }
  .panel{ border-radius: 20px; }
}
@keyframes slideUp{ from{ transform: translateY(30px); opacity:0;} to{ transform:none; opacity:1;} }

.panel h2{ margin-top:0; color: var(--bordeaux); }
.cart-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 12px 0; border-bottom: 1px solid #ecdfc4;
}
.cart-item .nom{ font-weight:600; }
.cart-item .prix{ color:var(--gris-texte); font-size:13px; }
.cart-total{
  display:flex; justify-content:space-between; font-size:18px; font-weight:700;
  padding: 16px 0; color: var(--bordeaux);
}

.field{ margin-bottom:14px; }
.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--charbon); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1px solid #e0d3b8;
  background:#fff; font-family:inherit; font-size:14px;
}
.field textarea{ resize:vertical; min-height:70px; }
.radio-group{ display:flex; gap:10px; }
.radio-group label{
  flex:1; text-align:center; border:1px solid #e0d3b8; border-radius:10px; padding:10px;
  font-size:13px; cursor:pointer;
}
.radio-group input{ display:none; }
.radio-group input:checked + span{ font-weight:700; }
.radio-group label:has(input:checked){ background: var(--bordeaux); color:#fff; border-color:var(--bordeaux); }

.empty-state{ text-align:center; padding: 40px 20px; color: var(--gris-texte); }
.empty-state .emoji{ font-size:40px; margin-bottom:10px; }

.confirmation{ text-align:center; padding: 30px 10px; }
.confirmation .emoji{ font-size:56px; }
.confirmation h2{ color: var(--vert-ok); }
.confirmation .num{ font-size:32px; font-weight:700; color:var(--bordeaux); }

.toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  background: var(--charbon); color:#fff; padding:12px 22px; border-radius:999px;
  font-size:14px; z-index:100; box-shadow: var(--ombre-forte); opacity:0; pointer-events:none;
  transition: opacity .25s ease, top .25s ease;
}
.toast.show{ opacity:1; top:30px; }

/* ============================================================
   ADMIN / SERVEUR
   ============================================================ */
.admin-body{ background: #f4efe4; min-height:100vh; }
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-card{
  background:#fff; border-radius:20px; box-shadow: var(--ombre-forte); padding: 40px 34px;
  width:100%; max-width: 380px; text-align:center;
}
.login-card h1{ color:var(--bordeaux); margin-bottom:4px; }
.login-card p{ color: var(--gris-texte); font-size:13px; margin-bottom:24px; }
.login-error{ color: var(--rouge-alerte); font-size:13px; margin-top:10px; min-height:16px; }

.admin-shell{ display:flex; min-height:100vh; }
.sidebar{
  width: 230px; background: var(--bordeaux-dark); color:#fff; padding: 24px 0; flex-shrink:0;
  display:flex; flex-direction:column;
}
.sidebar .brand{ padding: 0 24px 24px; font-size:22px; border-bottom:1px solid rgba(255,255,255,0.15); margin-bottom:10px;}
.sidebar .brand small{ display:block; font-family:'Poppins',sans-serif; font-size:11px; color:var(--or-clair); letter-spacing:1px; }
.sidebar button.tab{
  background:transparent; border:none; color: rgba(255,255,255,0.75); text-align:left;
  padding: 14px 24px; font-size:14px; display:flex; align-items:center; gap:10px;
}
.sidebar button.tab.active{ background: rgba(255,255,255,0.1); color:#fff; border-left:3px solid var(--or); }
.sidebar button.tab:hover{ background: rgba(255,255,255,0.08); }
.sidebar .logout{ margin-top:auto; padding: 16px 24px; }
.sidebar .logout button{ width:100%; }

.main-area{ flex:1; padding: 28px 32px; overflow-x:hidden; }
.main-area h1{ color: var(--bordeaux); margin-top:0; }

.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:18px; margin-bottom: 28px; }
.stat-card{ background:#fff; border-radius:16px; padding:20px; box-shadow: var(--ombre); }
.stat-card .label{ font-size:12px; color:var(--gris-texte); text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value{ font-size:26px; font-weight:700; color: var(--bordeaux); margin-top:6px; }

.card{ background:#fff; border-radius:16px; padding:22px; box-shadow: var(--ombre); margin-bottom:22px; }
.card h2{ margin-top:0; font-size:19px; color: var(--charbon); }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th,td{ text-align:left; padding: 10px 8px; border-bottom:1px solid #eee2cc; }
th{ color: var(--gris-texte); font-weight:600; font-size:12px; text-transform:uppercase; }
tr:hover td{ background:#fbf6ee; }
.thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; background:#f0e9d8; }

.badge-statut{
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; display:inline-block;
}
.st-en_attente{ background:#fdecd6; color:var(--orange-attente); }
.st-confirmee{ background:#dcecff; color:#2b5fa8; }
.st-en_preparation{ background:#fff2c4; color:#8a6d13; }
.st-prete{ background:#d8f0da; color:var(--vert-ok); }
.st-servie{ background:#e4e4e4; color:#555; }
.st-annulee{ background:#f8dede; color:var(--rouge-alerte); }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 640px){ .form-grid{ grid-template-columns:1fr; } }

.toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.pill-filter{ display:flex; gap:8px; flex-wrap:wrap; }
.pill-filter button{
  background:#fff; border:1px solid #e0d3b8; border-radius:999px; padding:6px 14px; font-size:13px;
}
.pill-filter button.active{ background: var(--bordeaux); color:#fff; border-color:var(--bordeaux); }

.image-upload{
  border: 2px dashed #e0d3b8; border-radius:12px; padding:16px; text-align:center; cursor:pointer;
  color: var(--gris-texte); font-size:13px;
}
.image-upload img{ max-height:120px; margin: 0 auto 8px; border-radius:8px; }

.modal-bg{
  position:fixed; inset:0; background:rgba(42,32,24,.5); z-index:80;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-bg.open{ display:flex; }
.modal{
  background:#fff; border-radius:18px; padding:26px; width:100%; max-width:520px;
  max-height:88vh; overflow-y:auto;
}
.modal h2{ margin-top:0; color:var(--bordeaux); }
.modal-close{ float:right; background:none; border:none; font-size:20px; color:var(--gris-texte); }

/* ---------- Serveur: file de commandes ---------- */
.order-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:18px; }
.order-card{
  background:#fff; border-radius:16px; padding:18px; box-shadow: var(--ombre);
  border-left: 5px solid var(--orange-attente);
}
.order-card.confirmee{ border-left-color:#2b5fa8; }
.order-card.en_preparation{ border-left-color:#8a6d13; }
.order-card.prete{ border-left-color: var(--vert-ok); }
.order-card .head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.order-card .head .num{ font-weight:700; font-size:16px; color:var(--bordeaux); }
.order-card .head .heure{ font-size:12px; color:var(--gris-texte); }
.order-card ul{ margin:8px 0; padding-left:18px; font-size:14px; }
.order-card .total{ font-weight:700; margin-top:6px; }
.order-card .actions{ margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.new-flash{ animation: flash 1s ease 3; }
@keyframes flash{ 0%,100%{ box-shadow: var(--ombre);} 50%{ box-shadow: 0 0 0 6px rgba(204,154,58,.5);} }

.top-bar-mobile{ display:none; }
@media (max-width: 860px){
  .admin-shell{ flex-direction:column; }
  .sidebar{ width:100%; flex-direction:row; overflow-x:auto; padding: 10px; align-items:center; }
  .sidebar .brand{ display:none; }
  .sidebar button.tab{ padding:10px 16px; white-space:nowrap; border-left:none; border-bottom:3px solid transparent; }
  .sidebar button.tab.active{ border-left:none; border-bottom-color:var(--or); }
  .sidebar .logout{ margin-top:0; padding: 0 10px; }
  .main-area{ padding:18px; }
}

.helper{ font-size:12px; color:var(--gris-texte); margin-top:4px; }
.loading-dot{ display:inline-block; width:8px;height:8px;border-radius:50%; background:var(--or); animation: pulse 1s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }

/* ---------- Footer "plage" ---------- */
.site-footer{ margin-top:20px; position:relative; }
.footer-wave{
  height: 40px; width:100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q150 40 300 20 T600 20 T900 20 T1200 20 V40 H0 Z' fill='%230f7a85'/%3E%3C/svg%3E") repeat-x;
  background-size: 300px 40px;
}
.footer-content{
  background: linear-gradient(115deg, var(--bordeaux) 0%, var(--bordeaux-dark) 100%);
  color: #fff; text-align:center; padding: 28px 20px 34px;
}
.footer-content .brand{ font-size:20px; margin-bottom:6px; }
.footer-content p{ margin:4px 0; font-size:13px; opacity:.85; }
.footer-sub{ opacity:.65 !important; }

/* ---------- Splash (ouverture app) ---------- */
.splash{
  position: fixed; inset:0; z-index: 300;
  background: linear-gradient(160deg, var(--bordeaux) 0%, var(--turquoise) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation: splashOut .5s ease 1.5s forwards;
}
.splash-logo{
  font-size: 72px; animation: splashPop .7s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
}
.splash-title{
  font-family:'Playfair Display', serif; color:#fff; font-size:32px; margin-top:10px;
  opacity:0; animation: splashFadeUp .6s ease .25s forwards;
}
.splash-sub{
  color: rgba(255,255,255,0.8); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  opacity:0; animation: splashFadeUp .6s ease .4s forwards;
}
@keyframes splashPop{ from{ transform:scale(0.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
@keyframes splashFadeUp{ from{ transform:translateY(10px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

/* ---------- Choix manger / boire ---------- */
.choice-overlay{
  position: fixed; inset:0; z-index: 250;
  background: linear-gradient(160deg, var(--bordeaux) 0%, var(--turquoise) 100%);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; animation: choiceIn .5s ease 1.55s forwards;
}
@keyframes choiceIn{ from{ opacity:0; } to{ opacity:1; } }
.choice-card-wrap{ text-align:center; color:#fff; max-width:420px; width:100%; }
.choice-kicker{ font-size:13px; letter-spacing:2px; text-transform:uppercase; opacity:.85; margin-bottom:6px; }
.choice-card-wrap h2{ font-family:'Playfair Display', serif; font-size:34px; margin:0 0 28px; }
.choice-buttons{ display:flex; gap:16px; }
.choice-btn{
  flex:1; background: rgba(255,255,255,0.14); border:2px solid rgba(255,255,255,0.35);
  border-radius: 22px; padding: 28px 12px; color:#fff; display:flex; flex-direction:column; gap:10px;
  align-items:center; font-size:17px; font-weight:600; backdrop-filter: blur(4px);
  transition: transform .18s ease, background .18s ease;
}
.choice-btn:hover, .choice-btn:active{ background: rgba(255,255,255,0.28); transform: translateY(-3px); }
.choice-emoji{ font-size:40px; }
.choice-skip{
  margin-top:26px; background:none; border:none; color: rgba(255,255,255,0.75);
  text-decoration: underline; font-size:13px;
}

/* ---------- Mode switch (manger/boire, apres le choix initial) ---------- */
.mode-switch{
  display:flex; justify-content:center; gap:10px; padding: 4px 24px 14px;
}
.mode-btn{
  background:#fff; border:1.5px solid #e0d3b8; border-radius:999px; padding:9px 20px;
  font-size:14px; font-weight:600; color:var(--charbon); transition: all .2s ease;
}
.mode-btn.active{ background: var(--bordeaux); border-color:var(--bordeaux); color:#fff; }

/* ---------- Mini graphiques en barres (Rapports) ---------- */
.bar-chart{ display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:10px; overflow-x:auto; }
.bar-chart .bar-col{ flex:1; min-width:26px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.bar-chart .bar{
  width:100%; max-width:34px; background: linear-gradient(180deg, var(--turquoise), var(--bordeaux));
  border-radius: 6px 6px 0 0; transition: height .3s ease; min-height:2px;
}
.bar-chart .bar-label{ font-size:10px; color:var(--gris-texte); margin-top:6px; white-space:nowrap; }
.bar-chart .bar-value{ font-size:10px; font-weight:600; color:var(--charbon); margin-bottom:4px; white-space:nowrap; }
.bar-chart-empty{ color:var(--gris-texte); font-size:13px; padding:20px 0; text-align:center; }

.text-entree{ color: var(--vert-ok); font-weight:600; }
.text-sortie{ color: var(--rouge-alerte); font-weight:600; }

/* ---------- Header : bouton suivi de commande ---------- */
.btn-header-link{
  color:#fff; background:transparent; border: 1px solid rgba(255,255,255,0.35);
  padding: 8px 16px; border-radius: 999px; font-size: 14px; margin-right:8px;
  transition: all .2s ease;
}
.btn-header-link:hover{ background: rgba(255,255,255,0.15); }

/* ---------- Barre de recherche ---------- */
.search-bar{ padding: 6px 24px 4px; }
.search-bar input{
  width:100%; padding:13px 18px; border-radius:999px; border:1px solid #e0d3b8;
  background:#fff; font-family:inherit; font-size:14px; box-shadow: var(--ombre);
}
.search-bar input:focus{ outline:2px solid var(--turquoise); outline-offset:1px; }

/* ---------- Disponibilite ---------- */
.dispo-badge{
  position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:700; z-index:2;
}
.dispo-ok{ background: rgba(47,158,110,0.92); color:#fff; }
.dispo-low{ background: rgba(240,146,60,0.95); color:#fff; }
.dispo-out{ background: rgba(90,90,90,0.9); color:#fff; }
.plat-card{ position:relative; }
.plat-card.out-of-stock{ opacity:0.55; }
.plat-card.out-of-stock .btn, .plat-card.out-of-stock .stepper{ pointer-events:none; opacity:0.5; }

/* ---------- Modale details produit ---------- */
.detail-img{ width:100%; height:220px; object-fit:cover; border-radius:16px; margin-bottom:16px; }
.detail-img.placeholder{ display:flex; align-items:center; justify-content:center; font-size:64px; }
.detail-desc{ color:var(--gris-texte); line-height:1.6; margin:10px 0 18px; }
.detail-price{ font-size:24px; font-weight:700; color:var(--bordeaux); margin-bottom:10px; }

/* ---------- Panier : ligne avec suppression ---------- */
.cart-item .remove-btn{
  background:none; border:none; color:var(--rouge-alerte); font-size:18px; padding:4px 6px;
}

/* ---------- Suivi de commande ---------- */
.track-order-card{
  background:#fff; border-radius:14px; padding:16px; margin-bottom:12px; box-shadow: var(--ombre);
}
.track-order-card .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.track-order-card .num{ font-weight:700; color:var(--bordeaux); }
.track-order-card ul{ margin:6px 0; padding-left:18px; font-size:13px; color:var(--gris-texte); }
.track-progress{ display:flex; gap:4px; margin:10px 0; }
.track-progress .step{ flex:1; height:6px; border-radius:3px; background:#eee2cc; }
.track-progress .step.done{ background: var(--vert-ok); }
.track-progress .step.cancelled{ background: var(--rouge-alerte); }

/* ---------- Dashboard : sous-titres et filtre personnalise ---------- */
.dash-subtitle{ font-size:14px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-texte); margin: 22px 0 10px; }
.field-inline{ display:flex; align-items:center; }
.field-inline input[type="date"]{ padding:9px 12px; border-radius:10px; border:1px solid #e0d3b8; font-family:inherit; }

/* ---------- Code de confirmation (ecran client) ---------- */
.code-box{
  background: linear-gradient(135deg, rgba(45,212,200,0.10), rgba(255,111,79,0.08));
  border: 2px dashed var(--turquoise); border-radius:16px; padding:16px; margin:16px 0;
}
.confirm-code{
  font-family:'Playfair Display', serif; font-size:38px; font-weight:700; letter-spacing:8px;
  color: var(--bordeaux); margin: 4px 0;
}

/* ---------- Comptabilite simplifiee (cascade) ---------- */
.accounting-waterfall{ max-width:520px; margin:0 auto; }
.waterfall-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 4px; font-size:15px; border-bottom:1px solid #f0e9d8;
}
.waterfall-row.wf-sub{ color:var(--gris-texte); font-size:14px; }
.waterfall-row.wf-total{ font-weight:700; border-top:2px solid var(--charbon); border-bottom:2px solid #f0e9d8; margin-top:2px; }
.waterfall-row.wf-final{
  font-weight:700; font-size:18px; color:var(--bordeaux); border-top:2px solid var(--bordeaux);
  border-bottom:none; margin-top:6px; padding-top:14px;
}
.wf-amount{ font-variant-numeric: tabular-nums; }
.wf-neg{ color: var(--rouge-alerte); }
.accounting-disclaimer{
  margin-top:18px; padding:14px 16px; background:#fff8e8; border:1px solid #f0d999;
  border-radius:12px; font-size:12.5px; color:#6b5a2a; line-height:1.5;
}

/* ---------- Cloche de notifications ---------- */
.notif-bell{
  position: fixed; top:16px; right:16px; z-index:120;
  width:46px; height:46px; border-radius:50%; border:none;
  background: var(--bordeaux); color:#fff; font-size:20px;
  box-shadow: var(--ombre-forte); display:flex; align-items:center; justify-content:center;
}
.notif-badge{
  position:absolute; top:-2px; right:-2px; background: var(--rouge-alerte); color:#fff;
  font-size:11px; font-weight:700; border-radius:999px; min-width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}
.notif-panel{
  position: fixed; top:68px; right:16px; z-index:119; width:340px; max-width:calc(100vw - 32px);
  max-height:70vh; overflow-y:auto; background:#fff; border-radius:16px; box-shadow: var(--ombre-forte);
}
.notif-panel-header{
  display:flex; justify-content:space-between; align-items:center; padding:14px 16px;
  border-bottom:1px solid #f0e9d8; position:sticky; top:0; background:#fff;
}
.notif-panel-header h3{ margin:0; font-size:16px; }
.notif-panel-header button{ background:none; border:none; color:var(--bordeaux); font-size:12px; font-weight:600; }
.notif-item{
  display:flex; gap:10px; padding:12px 16px; border-bottom:1px solid #f6f0e4; cursor:pointer;
  transition: background .15s ease;
}
.notif-item:hover{ background:#fbf6ee; }
.notif-item.unread{ background:#fff8ea; }
.notif-item .icon{ font-size:20px; flex-shrink:0; }
.notif-item .content{ flex:1; min-width:0; }
.notif-item .title{ font-weight:600; font-size:13.5px; }
.notif-item .msg{ font-size:12.5px; color:var(--gris-texte); margin-top:2px; }
.notif-item .time{ font-size:11px; color:#a89e8c; margin-top:4px; }
.notif-empty{ padding:30px 16px; text-align:center; color:var(--gris-texte); font-size:13px; }

/* ---------- Recherche globale ---------- */
.search-group{ margin-bottom:16px; }
.search-group-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris-texte);
  font-weight:700; margin-bottom:6px; padding-left:2px;
}
.search-result-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer; transition: background .15s ease;
}
.search-result-item:hover{ background:#fbf6ee; }
.search-result-item .sr-main{ font-weight:600; font-size:13.5px; }
.search-result-item .sr-sub{ font-size:12px; color:var(--gris-texte); }
.search-result-item .sr-amount{ font-weight:600; font-size:13px; white-space:nowrap; }
.search-loading, .search-empty{ text-align:center; color:var(--gris-texte); padding:20px 0; font-size:13px; }

/* ============================================================
   REFONTE MOBILE "A LA GLOVO" : barre d'onglets + pages
   ============================================================ */

body.has-tabbar{ padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

.tab-page{ animation: fadeInPage .25s ease; }
@keyframes fadeInPage{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.hero-sm{ padding: 28px 24px 10px; }
.hero-sm h1{ font-size:30px; margin:0; }

/* ---------- Barre d'onglets du bas (style Glovo) ---------- */
.bottom-tabbar{
  position: fixed; left:0; right:0; bottom:0; z-index:90;
  background:#fff; border-top:1px solid #eee2cc;
  display:flex; justify-content:space-around; align-items:stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 16px rgba(15,90,96,0.08);
}
.tabbar-btn{
  flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:9px 4px 8px; color:#9c9284; font-size:11px; font-weight:600;
}
.tabbar-icon{ font-size:21px; line-height:1; filter: grayscale(1) opacity(.6); transition: filter .15s ease, transform .15s ease; }
.tabbar-btn.active{ color: var(--bordeaux); }
.tabbar-btn.active .tabbar-icon{ filter:none; transform: translateY(-1px) scale(1.05); }

/* ---------- Accueil : grandes icones rondes façon Glovo ---------- */
.home-categories{ display:flex; justify-content:center; gap:28px; padding: 6px 24px 4px; }
.home-cat-btn{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:14px; font-weight:700; color:var(--charbon);
}
.home-cat-icon{
  width:92px; height:92px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:40px; box-shadow: var(--ombre-forte); transition: transform .15s ease;
  border: 4px solid #fff; outline: 3px solid rgba(0,0,0,0.03);
}
.home-cat-btn:active .home-cat-icon{ transform: scale(0.94); }
.home-cat-icon.c-food{ background: linear-gradient(135deg, #ffd9c7, #ff9f7d); }
.home-cat-icon.c-drink{ background: linear-gradient(135deg, #bef0ea, #6fd8cb); }

.section-title{ font-size:19px; margin: 26px 24px 12px; color: var(--charbon); font-family:'Playfair Display', serif; }

.h-scroll{ display:flex; gap:14px; overflow-x:auto; padding: 0 24px 6px; scrollbar-width:none; }
.h-scroll::-webkit-scrollbar{ display:none; }
.h-scroll-card{
  flex:0 0 auto; width:150px; background:#fff; border-radius:16px; box-shadow: var(--ombre);
  overflow:hidden; cursor:pointer;
}
.h-scroll-card .h-img{ width:100%; height:100px; object-fit:cover; }
.h-scroll-card .h-img.placeholder{ display:flex; align-items:center; justify-content:center; font-size:30px; }
.h-scroll-card .h-body{ padding:10px 12px; }
.h-scroll-card .h-name{ font-size:13px; font-weight:700; line-height:1.25; margin-bottom:3px; }
.h-scroll-card .h-price{ font-size:12.5px; color: var(--bordeaux); font-weight:700; }

.home-info-card{
  margin: 28px 24px 10px; background:#fff; border-radius:16px; padding:16px 18px; box-shadow: var(--ombre);
}
.info-row{ font-size:13.5px; color: var(--gris-texte); padding:5px 0; }

/* Bandeau « Installer l'application / Activer les notifications » (personnel) */
.push-banner{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin: 0 0 18px; padding:12px 14px; border-radius:16px;
  background: linear-gradient(120deg, rgba(15,122,133,.10), rgba(255,111,79,.10)); border:1px solid rgba(15,122,133,.18); animation: pbIn .5s ease both; }
.push-banner[hidden]{ display:none; }
.push-banner .pb-btn{ border:0; cursor:pointer; font: 600 14px 'Poppins', sans-serif; padding:10px 16px; border-radius:999px; background:#fff; color:var(--bordeaux-dark); box-shadow: 0 2px 8px rgba(10,87,96,.12); transition: transform .15s ease; }
.push-banner .pb-btn.pb-main{ background: linear-gradient(135deg, var(--or), #ff9a5a); color:#fff; }
.push-banner .pb-btn:active{ transform: scale(.96); }
.push-banner .pb-btn:disabled{ opacity:.6; }
.push-banner .pb-txt{ font-size:13px; color:#28484c; line-height:1.45; }
@keyframes pbIn{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }

/* ===== Icônes maison (icons.js) : trait fin + aplat doux ===== */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-0.14em; flex-shrink:0; overflow:visible; }
.ic-d{ fill:currentColor; opacity:.18; }
.ic-s{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

/* ===== Pas de zoom involontaire (double toucher / champ de saisie) ===== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; touch-action: manipulation; }
body{ overflow-x: clip; max-width:100%; }
button, a, label, input, select, textarea, [role="button"]{ touch-action: manipulation; }
img, svg, video{ max-width:100%; }
/* iOS zoome si la police d'un champ fait moins de 16 px : on la garde à 16 px sur téléphone */
@media (max-width: 820px){ input, select, textarea{ font-size:16px !important; } }
.push-banner .pb-btn{ display:inline-flex; align-items:center; gap:6px; }
.push-banner .pb-btn .ic{ font-size:17px; }

/* ===== Animations fun (fx.js) ===== */
.rl-fx{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:900; opacity:0; transition: opacity .3s ease; }
.rl-fx.on{ opacity:1; }
.rl-ripple{ position:absolute; border-radius:50%; background: rgba(255,255,255,.45); transform: scale(0); pointer-events:none; animation: rlRipple .6s ease-out forwards; }
@keyframes rlRipple{ to{ transform: scale(1); opacity:0; } }

/* ===== LeMenu : habillage de l'établissement (js/brand.js) ===== */
.brand-wait [data-brand] { visibility: hidden; }
[data-brand][hidden] { display: none !important; }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }

/* ============================================================
   ACTUALISATIONS DISCRÈTES + ANIMATIONS (v12)
   ============================================================ */
/* Une liste redessinée automatiquement ne rejoue pas ses animations… */
.rl-calm > *:not(.is-new), .rl-calm > *:not(.is-new) *{ animation: none !important; }
body.rl-calm-dash .stat-card, body.rl-calm-dash .bar-chart .bar, body.rl-calm-dash .card{ animation: none !important; }
/* …seules les nouveautés arrivent, avec un halo doux */
.is-new{ animation: rlNewIn .6s cubic-bezier(.34,1.56,.64,1) both, rlGlow 2.4s ease .6s 1 !important; }
@keyframes rlNewIn{ 0%{ opacity:0; transform: translateY(-10px) scale(.96); } 100%{ opacity:1; transform:none; } }
@keyframes rlGlow{ 0%{ box-shadow: 0 0 0 0 rgba(255,170,60,.55); } 40%{ box-shadow: 0 0 0 8px rgba(255,170,60,.18); } 100%{ box-shadow: 0 0 0 0 rgba(255,170,60,0); } }
/* Chiffre qui change : reflet doré qui balaie la carte */
.stat-card{ position: relative; overflow: hidden; }
.stat-card.rl-updated::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,200,90,.35) 50%, transparent 70%);
  transform: translateX(-100%); animation: rlSweep 1.1s ease forwards; }
.stat-card.rl-updated .value{ animation: rlTick .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes rlSweep{ to{ transform: translateX(100%); } }
@keyframes rlTick{ 0%{ transform: translateY(6px); opacity:.3; } 100%{ transform:none; opacity:1; } }

/* Toast à ressort */
.toast{ transition: opacity .25s ease, top .45s cubic-bezier(.34,1.56,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1); transform: translateX(-50%) scale(.9); }
.toast.show{ transform: translateX(-50%) scale(1); }

/* « +1 » qui s'envole à l'ajout d'un article */
.plus-one{ position: fixed; z-index: 700; pointer-events:none; font: 800 18px/1 'Outfit','Poppins',sans-serif; color: var(--or, #ff6f4f);
  text-shadow: 0 2px 6px rgba(0,0,0,.18); animation: rlPlus .8s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes rlPlus{ 0%{ opacity:0; transform: translate(-50%,0) scale(.6); } 20%{ opacity:1; transform: translate(-50%,-14px) scale(1.25); } 100%{ opacity:0; transform: translate(-50%,-62px) scale(1); } }
/* Montant qui change : petit roulement */
.rl-roll{ display:inline-block; animation: rlRoll .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes rlRoll{ 0%{ transform: translateY(-70%); opacity:0; } 100%{ transform:none; opacity:1; } }
/* Valeur d'un compteur −/+ */
.rl-pop{ animation: rlPop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes rlPop{ 0%{ transform: scale(.6); } 60%{ transform: scale(1.3); } 100%{ transform: scale(1); } }

@media (prefers-reduced-motion: reduce){
  .is-new, .stat-card.rl-updated::after, .stat-card.rl-updated .value, .plus-one, .rl-roll, .rl-pop{ animation: none !important; }
  .plus-one{ display:none; }
}

/* ---------- Logo Wave (petite icône d'application) ---------- */
img.ic-wave{ width:1.2em; height:1.2em; border-radius:28%; object-fit:cover; vertical-align:-0.24em; background:#1dc4ff;
  box-shadow: 0 1px 3px rgba(8,80,120,.28), inset 0 0 0 1px rgba(255,255,255,.25); user-select:none; }

/* ---------- Barre de menu « verre flottant » (client C2 / serveur S2) ---------- */
.pill-nav.pill-nav{ position:fixed; z-index:90; left:12px; right:12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  max-width:520px; margin:0 auto; height:62px; border-radius:31px; display:flex !important; align-items:center; padding:0 6px !important;
  background: rgba(255,255,255,.66) !important; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border:1px solid rgba(255,255,255,.8) !important; box-shadow: 0 10px 30px rgba(20,50,55,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; }
.pill-nav.pill-nav > button{ position:relative; z-index:1; flex:1 1 0; min-width:0; height:50px; padding:0 !important; margin:0; border:0; background:none;
  display:flex !important; flex-direction:row !important; align-items:center; justify-content:center; gap:7px; color:#7f9193;
  font: 600 12.5px 'Poppins', sans-serif; cursor:pointer; -webkit-tap-highlight-color:transparent; transition: flex .45s cubic-bezier(.34,1.3,.64,1), color .3s ease; }
.pill-nav.pill-nav > button::before{ display:none !important; }
.pill-nav.pill-nav > button.active{ color: var(--lagon, #0f7a85); }
.pill-nav.pill-nav .icw{ position:relative; display:inline-flex; flex-shrink:0; }
.pill-nav.pill-nav .icw > svg, .pill-nav.pill-nav .icw > .ic{ width:24px !important; height:24px !important; font-size:24px; transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important; }
.pill-nav.pill-nav > button:active .icw > *:first-child{ transform: scale(.85); }
.pill-nav.pill-nav > button.active .icw > *:first-child{ transform: scale(1.06) !important; }
.pill-nav.pill-nav > button.active .ic-d{ opacity:.35; }
.pill-nav.pill-nav .icw img.ic-wave{ width:24px !important; height:24px !important; border-radius:7px; vertical-align:0; filter: saturate(.85); transition: filter .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.pill-nav.pill-nav > button.active img.ic-wave{ filter:none; }
/* le nom de l'onglet : masqué (mais lu par les lecteurs d'écran) sauf sur l'onglet actif côté client */
.pill-nav.pill-nav > button > span:not(.icw){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.pill-ind{ position:absolute; z-index:0; left:0; top:5px; height:50px; width:0; border-radius:25px; background: rgba(15,122,133,.14); pointer-events:none;
  transition: transform .45s cubic-bezier(.34,1.3,.64,1), width .45s cubic-bezier(.34,1.3,.64,1), opacity .2s; }
/* pastilles collées à l'icône */
.pill-nav.pill-nav .icw .tb-badge, .pill-nav.pill-nav .icw .nb{ top:-8px !important; left:auto !important; right:-12px; min-width:17px; height:17px; border:2px solid #fff; font-size:10px; line-height:1; }
@media (prefers-reduced-motion: reduce){ .pill-ind, .pill-nav.pill-nav > button, .pill-nav.pill-nav .icw > *{ transition:none !important; } }