:root{
  --red:#C1272D;
  --dark-green:#0F3D2E;
  --mid-green:#2F6B4F;
  --sea:#0B4F5C;
  --blue-gray:#3A4A58;
  --ink:#17242C;
  --paper:#EAF4F8;
  --card:#F5FAFC;
  --line:#D6E7ED;
  --amber:#B7791F;
  --gold:#D9A441;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm:0 2px 8px rgba(15,61,46,.06);
  --shadow-md:0 10px 28px rgba(15,61,46,.12);
  --shadow-lg:0 18px 44px rgba(11,40,32,.20);
  --ease:cubic-bezier(.22,.9,.35,1);
}
*{box-sizing:border-box;}
body{margin:0;font-family:-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",Roboto,sans-serif;
  background:
    radial-gradient(1100px 480px at 100% -10%, rgba(47,107,79,.10), transparent 60%),
    radial-gradient(900px 420px at -10% 0%, rgba(11,79,92,.08), transparent 55%),
    var(--paper);
  color:var(--ink); -webkit-font-smoothing:antialiased;}
a{color:inherit;}
h1,h2,h3{margin:0;letter-spacing:-.01em;}
p{margin:0;}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;font-size:14px;
  background:#fff;color:var(--ink);font-family:inherit;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mid-green);box-shadow:0 0 0 3px rgba(47,107,79,.14);}
input::placeholder,textarea::placeholder{color:#a9b8c4;}
input[type="file"]{padding:8px 10px;cursor:pointer;}
input[type="file"]::file-selector-button{background:linear-gradient(155deg,var(--mid-green),var(--dark-green));color:#fff;
  border:none;border-radius:9px;padding:8px 14px;font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;
  margin-right:10px;transition:filter .15s var(--ease);}
input[type="file"]::file-selector-button:hover{filter:brightness(1.08);}
label{display:block;font-size:11.5px;color:#5c6f7a;margin:10px 0 5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;}
.row{display:flex;gap:8px;}
.row > *{flex:1;}
.muted{color:#7c8f9a;font-size:11.5px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease),transform .2s var(--ease);}
.card h3{font-size:13.5px;margin:0 0 8px;color:var(--dark-green);font-weight:800;}
.card-elevated{background:#fff;box-shadow:var(--shadow-md);}
.a-chip.price-chip{background:linear-gradient(155deg,#FFE7D1,#FFD8B5);color:#A8480F;font-weight:800;box-shadow:inset 0 0 0 1px rgba(180,83,26,.15);}
.card-clickable{cursor:pointer;}
.card-clickable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px 18px;border-radius:12px;border:none;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:.01em;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .15s var(--ease),opacity .15s var(--ease);}
.btn:active{transform:scale(.97);}
.btn-block{display:flex;width:100%;margin-top:10px;}
.btn-primary{background:linear-gradient(155deg,var(--mid-green),var(--dark-green));color:#fff;box-shadow:0 6px 16px rgba(15,61,46,.28);}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 8px 20px rgba(15,61,46,.34);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;filter:none;}
.btn-secondary{background:#fff;color:var(--dark-green);border:1.5px solid var(--dark-green);}
.btn-secondary:hover{background:#EEF6F1;}
.btn-ghost{background:#eef2f0;color:var(--blue-gray);}
.btn-ghost:hover{background:#e3ebe6;}
.btn-danger{background:linear-gradient(155deg,#D8433E,var(--red));color:#fff;box-shadow:0 6px 16px rgba(193,39,45,.28);}
.btn-danger:hover{filter:brightness(1.06);}
.btn-warning{background:linear-gradient(155deg,#D9A441,var(--amber));color:#fff;box-shadow:0 6px 16px rgba(183,121,31,.28);}
.btn-warning:hover{filter:brightness(1.06);}
.btn-lg{padding:16px 20px;font-size:15.5px;border-radius:14px;}
.btn-sm{padding:6px 10px;font-size:12px;border-radius:8px;}

.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;padding:4px 11px;border-radius:20px;letter-spacing:.03em;}
.status-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85;}
.st-wait{background:#FBECD0;color:var(--amber);}
.st-ok{background:#DCF0E4;color:var(--mid-green);}
.st-block{background:#FBE0DE;color:var(--red);}
.st-info{background:#E4EAF6;color:#3A4A85;}
.st-sea{background:#DCEFE8;color:var(--dark-green);}

.banner-info{background:linear-gradient(155deg,#F1F8F3,#E9F3EC);border:1px dashed #a9c8b8;border-radius:12px;padding:12px 14px;font-size:11.5px;color:var(--blue-gray);margin-bottom:12px;}
.banner-error{background:#FDECEA;border:1px solid #f0bcb7;border-radius:12px;padding:11px 13px;font-size:12px;color:#8a2320;margin-bottom:12px;}

.topbar{background:linear-gradient(120deg,var(--dark-green),var(--sea) 130%);color:#fff;padding:0 20px;display:flex;align-items:center;gap:16px;
  height:60px;position:sticky;top:0;z-index:30;box-shadow:0 4px 18px rgba(11,40,32,.22);}
.topbar .logo-chip{background:#fff;border-radius:9px;padding:3px 7px;display:flex;align-items:center;box-shadow:0 2px 6px rgba(0,0,0,.15);flex:none;}
.topbar .logo-chip img{height:26px;display:block;}
.topbar .brandline{font-size:11px;color:#bcd3c6;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap;flex:none;}
/* Sur les largeurs intermédiaires (tablette) où la nav du haut est encore affichée mais
   trop étroite pour tout contenir, elle défile horizontalement plutôt que de déborder ou
   de casser la hauteur de la barre — jamais de retour à la ligne dans les boutons. */
.topbar nav{display:flex;gap:4px;margin-left:12px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.topbar nav::-webkit-scrollbar{display:none;}
.topbar nav button{background:transparent;border:none;color:#dcece4;padding:8px 12px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex:none;transition:background .15s var(--ease),color .15s var(--ease);}
.topbar nav button:hover{background:rgba(255,255,255,.08);}
.topbar nav button.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.topbar .spacer{flex:1;min-width:8px;}
.topbar .userbox{font-size:12.5px;color:#dcece4;display:flex;align-items:center;gap:8px;white-space:nowrap;flex:none;}
.topbar .userbox button{background:rgba(255,255,255,.12);border:none;color:#fff;padding:7px 12px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s var(--ease);}
.topbar .userbox button:hover{background:rgba(255,255,255,.22);}
/* Nom de l'utilisateur uniquement (pas les autres éléments qui vivent aussi dans
   .userbox comme le badge de notifications, qui garde son propre style) : tronqué
   proprement plutôt que de repousser le reste de la barre sur un nom très long. */
#aUserName,#vUserName,#adUserName,#oUserName{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;}
@media (max-width:480px){
  #aUserName,#vUserName,#adUserName,#oUserName{max-width:60px;}
  /* Priorité au nom et à la déconnexion, toujours utiles — le libellé du bouton de
     bascule de rôle se réduit à son icône sur très petit écran. */
  .rsw-label{display:none;}
  .topbar .brandline{display:none;}
}
@media (max-width:720px){
  /* La barre basse (visible sous ce même seuil) donne déjà accès au panier — le
     bouton du haut devient redondant et cède la place au nom/à la déconnexion. */
  .topbar-cart-btn{display:none;}
}

.wrap{max-width:1300px;margin:0 auto;padding:24px 20px 60px;}
.wrap-narrow{max-width:520px;margin:0 auto;padding:24px 20px 60px;}

.table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);}
.table th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:#8a9a94;background:var(--paper);padding:11px 14px;}
.table td{padding:13px 14px;font-size:13px;border-top:1px solid var(--line);}
.table tbody tr{transition:background .12s var(--ease);}
.table tbody tr:hover{background:#F3F9F5;}

.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,10px);background:#0e1a17;color:#fff;font-size:13px;
  padding:12px 18px;border-radius:12px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;z-index:200;max-width:90vw;text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28);}
.toast.show{opacity:1;transform:translate(-50%,0);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}

.qr-wrap{background:#fff;padding:16px;border-radius:14px;display:inline-block;box-shadow:var(--shadow-sm);}
.qr-wrap svg{display:block;}

.notif-bell{position:relative;}
.notif-bell>button{background:rgba(255,255,255,.12);border:none;color:#fff;padding:7px 10px;border-radius:9px;font-size:14px;cursor:pointer;position:relative;transition:background .15s var(--ease);}
.notif-bell>button:hover{background:rgba(255,255,255,.22);}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:9.5px;font-weight:700;
  min-width:15px;height:15px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 0 2px var(--dark-green);}
.notif-panel{position:absolute;right:0;top:calc(100% + 10px);width:300px;max-height:360px;overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:100;color:var(--ink);animation:dpPop .16s var(--ease);}
.notif-item{padding:11px 13px;border-top:1px solid var(--line);font-size:12.5px;cursor:pointer;transition:background .12s var(--ease);}
.notif-item:hover{background:#F3F9F5;}
.notif-item:first-child{border-top:none;}
.notif-item.unread{background:#EEF3F1;font-weight:600;}

/* ---------- shared "alive" motifs: icon tiles, empty states, section heads ---------- */
.icon-tile{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;flex:none;
  background:linear-gradient(155deg,#e8f3ec,#d9ece1);color:var(--dark-green);box-shadow:inset 0 0 0 1px rgba(15,61,46,.08);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.section-head h1,.section-head h2{display:flex;align-items:center;gap:10px;}
.section-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mid-green);margin-bottom:2px;display:block;}

.wallet-balance{background:linear-gradient(155deg,var(--mid-green),var(--dark-green));border-radius:16px;padding:20px;text-align:center;color:#fff;box-shadow:var(--shadow-md);margin-bottom:12px;}
.wallet-balance p{color:rgba(255,255,255,.75);font-size:11.5px;}
.wallet-balance h2{font-size:30px;margin-top:4px;}

.nav-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px;cursor:pointer;text-align:left;box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);}
.nav-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#c7e0d2;}
.nav-card:active{transform:translateY(0) scale(.98);}
.nav-card span{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.25;}
.nav-card.primary{background:linear-gradient(155deg,var(--mid-green),var(--dark-green));border-color:transparent;}
.nav-card.primary span{color:#fff;}
.nav-card.primary .icon-tile{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}

.empty-state{text-align:center;padding:34px 18px;border:1.5px dashed var(--line);border-radius:16px;background:rgba(255,255,255,.5);}
.empty-state .icon-tile{margin:0 auto 12px;width:52px;height:52px;font-size:24px;}
.empty-state p{color:#7c8f9a;font-size:12.5px;max-width:280px;margin:0 auto;}

.fade-in{animation:dpFade .28s var(--ease);}
@keyframes dpFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes dpPop{from{opacity:0;transform:translateY(-4px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- photo presentation ---------- */
.photo-frame{position:relative;border-radius:16px;overflow:hidden;background:#e7eef0;box-shadow:var(--shadow-sm);}
.photo-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease);}
.photo-frame:hover img{transform:scale(1.045);}
.photo-frame .pf-caption{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 10px;
  background:linear-gradient(0deg,rgba(9,26,20,.82),rgba(9,26,20,.35) 70%,transparent);color:#fff;}
.photo-frame .pf-caption b{font-size:14px;display:block;}
.photo-frame .pf-caption span{font-size:11px;opacity:.85;}
.photo-frame .pf-badge{position:absolute;top:10px;left:10px;background:rgba(15,61,46,.88);color:#fff;font-size:10.5px;font-weight:800;
  padding:5px 11px;border-radius:20px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.2);}

/* ---------- mobile bottom tab bar (remplace la nav du haut, cachée sur mobile) ---------- */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,61,46,.10);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
.bottom-nav-inner{display:flex;justify-content:space-around;align-items:stretch;max-width:720px;margin:0 auto;}
.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;
  padding:6px 2px;border-radius:12px;color:#8a9a94;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:color .15s var(--ease),background .15s var(--ease);}
.bottom-nav button .bn-icon{font-size:19px;line-height:1;transition:transform .18s var(--ease);}
.bottom-nav button:active .bn-icon{transform:scale(.85);}
.bottom-nav button.active{color:var(--dark-green);background:#EAF4EE;}
.bottom-nav button.active .bn-icon{transform:translateY(-1px);}

@media (max-width: 720px){
  .topbar nav{display:none;}
  .grid2{grid-template-columns:1fr;}
  .bottom-nav{display:block;}
}