:root{
  --green:#0B5A3C;
  --green-dark:#0A4E34;
  --gold:#E8C766;
  --bg:#F5F1E6;
  --text:#15291F;
  --border:#E4DCC8;
  --muted:#8A937F;
  --muted2:#5B6B5F;
  --panel:#F0EBDA;
  --panel2:#FBF9F2;
  --err-bg:#FBEAE7;
  --err-fg:#9B2C1B;
  --input-border:#D8D0BC;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-family:'Instrument Sans',sans-serif;color:var(--text);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold)}
input,select,textarea,button{font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:1px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media print{.no-print{display:none !important}body{background:#fff}.table-scroll{overflow:visible}}

/* Topbar */
.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;background:var(--green);color:#fff}
.brand{display:flex;align-items:center;gap:10px}
.brand-badge{background:#fff;border-radius:10px;padding:7px 10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.18);animation:logoPop .55s cubic-bezier(.2,.9,.3,1.2) both}
.brand-badge img{display:block;height:30px;width:auto}
@keyframes logoPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.brand-name{font-family:'Amiri',serif;font-size:26px;font-weight:700;letter-spacing:2px;color:var(--gold);animation:fadeUp .45s ease .1s both}
.brand-sub{font-size:12px;color:rgba(255,255,255,0.75)}
.nav-pills{display:flex;gap:4px;background:rgba(255,255,255,0.12);padding:4px;border-radius:99px}
.pill{border:none;border-radius:99px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:rgba(255,255,255,0.8);display:inline-block}
.pill-active{background:var(--gold);color:var(--text)}
.pill:hover{color:#fff}
.pill-active:hover{color:var(--text)}

/* Ecran d'accueil (affiche une fois par session, ~3s) */
.wb-splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;animation:splashBgFade .4s ease}
.wb-splash-logo{width:min(240px,55vw);height:auto;animation:splashLogoPop .65s cubic-bezier(.2,.9,.3,1.1) both}
.wb-splash-tag{font-size:14px;font-weight:700;color:var(--muted2);letter-spacing:.08em;text-transform:uppercase;opacity:0;animation:fadeUp .5s ease .35s both}
.wb-splash-hide{animation:splashOut .5s ease forwards}
@keyframes splashBgFade{from{opacity:0}to{opacity:1}}
@keyframes splashLogoPop{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:none}}
@keyframes splashOut{from{opacity:1}to{opacity:0}}

.notice-bar{background:#FDF6E0;color:#6B4F0F;border-bottom:1px solid var(--gold);padding:9px 16px;font-size:13px;line-height:1.5;text-align:center}
.notice-bar strong{color:#5B4409}

.site-footer{text-align:center;padding:18px 16px 28px;font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0.02em}

/* Layout */
.page-wrap{max-width:440px;margin:0 auto;padding:20px 16px 60px}
.fade-card{animation:fadeUp .3s ease}

/* Hero (formulaire acheteur) */
.hero{background:var(--green);border-radius:16px;padding:22px 20px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden}
.hero-circle{position:absolute;right:-18px;top:-18px;width:110px;height:110px;border-radius:50%;border:14px solid rgba(232,199,102,0.25)}
.hero-title{font-family:'Amiri',serif;font-size:24px;color:var(--gold);margin-bottom:6px}
.hero-text{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.85)}
.hero-badges{display:flex;gap:14px;margin-top:14px;font-size:12.5px;font-weight:600;flex-wrap:wrap}
.badge{padding:5px 10px;border-radius:99px}
.badge-gold{background:rgba(232,199,102,0.18);color:var(--gold)}
.badge-light{background:rgba(255,255,255,0.12);color:#fff}

/* Carte formulaire */
.card{background:#fff;border-radius:16px;padding:20px;border:1px solid var(--border);display:flex;flex-direction:column;gap:16px}
.section-label{font-weight:700;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--green)}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.field input,.field select,.field textarea{padding:12px;border:1px solid var(--input-border);border-radius:10px;font-size:16px;background:var(--panel2)}
.field textarea{resize:vertical;font-size:14px}

.kg-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kg-option{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;border:1px solid var(--input-border);background:#fff;color:var(--text);position:relative}
.kg-option input{position:absolute;opacity:0;width:0;height:0}
.kg-selected{border:2px solid var(--green);background:var(--green);color:var(--gold)}

.total-row{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border-radius:10px;padding:12px 14px}
.total-label{font-size:13px;font-weight:600;color:var(--muted2)}
.total-value{font-size:19px;font-weight:700;color:var(--green)}

.error-box{background:var(--err-bg);color:var(--err-fg);border-radius:10px;padding:11px 14px;font-size:13.5px;font-weight:600}
.btn-primary{padding:15px;border:none;border-radius:12px;background:var(--green);color:#fff;font-size:16px;font-weight:700;cursor:pointer;width:100%}
.btn-primary:hover{background:var(--green-dark)}
.hint-text{font-size:12px;color:var(--muted);text-align:center}

/* Confirmation */
.confirm-card{background:#fff;border-radius:16px;border:1px solid var(--border);padding:28px 22px;text-align:center;display:flex;flex-direction:column;gap:14px}
.confirm-icon{width:64px;height:64px;border-radius:50%;background:var(--green);color:var(--gold);font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto}
.confirm-title{font-family:'Amiri',serif;font-size:24px;color:var(--green)}
.confirm-text{font-size:14px;color:var(--muted2);line-height:1.5}
.confirm-ref{background:var(--panel);border-radius:12px;padding:14px;font-size:22px;font-weight:700;letter-spacing:2px;color:var(--green)}
.confirm-details{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:14px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;padding:14px}
.detail-row{display:flex;justify-content:space-between}
.detail-row span{color:var(--muted)}
.btn-outline{display:block;padding:13px;border:1px solid var(--green);border-radius:12px;background:#fff;color:var(--green);font-size:15px;font-weight:700;cursor:pointer;text-align:center}
.btn-outline:hover{color:var(--green-dark);border-color:var(--green-dark)}

/* Connexion admin */
.login-wrap{max-width:400px}

/* Admin dashboard */
.admin-topline{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.admin-title{font-family:'Amiri',serif;font-size:clamp(21px,4vw,26px);color:var(--green)}
.admin-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn-outline-sm{padding:9px 14px;border:1px solid var(--green);border-radius:10px;background:#fff;color:var(--green);font-weight:600;font-size:13px;cursor:pointer;display:inline-block}
.btn-primary-sm{padding:9px 14px;border:none;border-radius:10px;background:var(--green);color:#fff;font-weight:600;font-size:13px;cursor:pointer}
.btn-text-sm{padding:9px 6px;font-weight:600;font-size:13px;color:var(--muted2);display:inline-block}

.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px}
.stat-card-warn{background:#FDF6E0;border-color:var(--gold)}
.stat-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em}
.stat-value{font-size:26px;font-weight:700}
.stat-green{color:var(--green)}
.stat-warn{color:#8A6A12}

.panel{background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px}
.panel-label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:10px}
.payee-list{display:flex;flex-wrap:wrap;gap:8px}
.payee-chip{display:flex;align-items:baseline;gap:8px;background:var(--panel);border-radius:99px;padding:7px 13px;font-size:13px}
.payee-chip b{color:var(--green)}
.payee-amount{color:#8A6A12;font-weight:700}

.filters-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.filters-bar input,.filters-bar select{padding:11px 14px;border:1px solid var(--input-border);border-radius:10px;font-size:14px;background:#fff}
.filters-bar input{flex:1;min-width:200px;font-size:16px}

.table-card{background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table-scroll{overflow-x:auto}
.table-inner{min-width:760px}
.table-head-row{display:grid;grid-template-columns:96px 1.6fr 70px 110px 130px 110px 84px;gap:10px;padding:11px 16px;background:var(--panel);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted2)}
.table-row{display:grid;grid-template-columns:96px 1.6fr 70px 110px 130px 110px 84px;gap:10px;padding:13px 16px;border-top:1px solid #EFEADB;font-size:13.5px;align-items:center}
.cell-ref{font-weight:700;color:var(--green)}
.cell-nom{font-weight:600}
.cell-sub{font-size:12px;color:var(--muted)}
.cell-bold{font-weight:600}
.cell-sm{font-size:13px}
.status-chip{padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;display:inline-block}
.btn-details{display:inline-block;padding:7px 12px;border:1px solid var(--input-border);border-radius:8px;background:var(--panel2);font-size:12.5px;font-weight:600;cursor:pointer;color:var(--green)}
.empty-row{padding:30px;text-align:center;color:var(--muted);font-size:14px}

/* Détail commande (admin) */
.back-link{display:inline-block;font-size:13px;font-weight:600}
.modal-box{background:#fff;border-radius:18px;padding:22px;border:1px solid var(--border)}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.modal-title{font-family:'Amiri',serif;font-size:22px;color:var(--green)}
.modal-detail-row{display:flex;justify-content:space-between;border-bottom:1px solid #EFEADB;padding-bottom:8px;font-size:14px;margin-bottom:10px;gap:10px}
.modal-detail-row span{color:var(--muted)}
.modal-notes{background:var(--panel2);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--muted2);margin-bottom:10px}
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn-verify{padding:11px;border:none;border-radius:10px;background:var(--green);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer}
.btn-reject{padding:11px;border:1px solid #C0392B;border-radius:10px;background:#fff;color:#C0392B;font-weight:700;font-size:13.5px;cursor:pointer}
.btn-ready{padding:11px;border:1px solid var(--green);border-radius:10px;background:#fff;color:var(--green);font-weight:700;font-size:13.5px;cursor:pointer}
.btn-done{padding:11px;border:1px solid var(--input-border);border-radius:10px;background:var(--panel2);color:var(--muted2);font-weight:700;font-size:13.5px;cursor:pointer}