/* Marsa — feuille de style unique, partagee par les trois portails */

:root{
  --encre:#0A2129; --encre-2:#123540; --fond:#E7EEF0; --surface:#FFFFFF;
  --maree:#00857A; --maree-clair:#E0F2EF; --ardoise:#5A7078; --trait:#D3DFE3;
  --signal:#F0A202; --signal-clair:#FDF0D5; --alerte:#C1342B; --alerte-clair:#FBE7E5;
  --violet:#5B4B8A;
  --r:10px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--fond);color:var(--encre);font-family:var(--sans);font-size:15px;line-height:1.45;padding-bottom:96px}
body.admin{--maree:#5B4B8A;--maree-clair:#EBE7F3}
body.acheteur{--maree:#1F5C99;--maree-clair:#E4EEF7}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.bar{position:sticky;top:0;z-index:50;background:var(--encre);color:#fff}
.bar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px 11px;max-width:620px;margin:0 auto;width:100%}
.marque{font-size:19px;font-weight:700;letter-spacing:-.03em;flex-shrink:0}
.marque span{color:var(--maree)}
.marque em{
  display:block;font-style:normal;font-size:9px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--maree);margin-top:1px;
}
.bar-id{text-align:right;line-height:1.2;min-width:0}
.bar-id .n{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-id .s{font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:#8FA5AC}
/* --- bouton de deconnexion, toujours visible dans la barre --- */
.bar-fin{display:flex;align-items:center;gap:10px;min-width:0}
.deco{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  color:#B9CBD1;font-family:var(--sans);
}
.deco:hover{background:rgba(255,255,255,.14);color:#fff}
.deco:active{background:rgba(255,255,255,.2)}
.deco svg{width:18px;height:18px;display:block}

.horloge{text-align:right;line-height:1.15;flex-shrink:0}
.horloge-l{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#8FA5AC}
.horloge-v{font-size:16px;font-weight:600}
.horloge-v.chaud{color:var(--signal)} .horloge-v.froid{color:#8FA5AC}

.onglets{display:flex;background:var(--encre-2);border-top:1px solid rgba(255,255,255,.07)}
.onglets-in{display:flex;max-width:620px;margin:0 auto;width:100%}
.onglet{flex:1;border:0;background:none;color:#8FA5AC;cursor:pointer;padding:11px 3px 9px;
  font-family:var(--sans);font-size:11.5px;font-weight:600;border-bottom:2px solid transparent}
.onglet.on{color:#fff;border-bottom-color:var(--maree)}
.pastille{display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;background:var(--signal);
  color:var(--encre);border-radius:9px;font-family:var(--mono);font-size:10px;font-weight:700}

.ruban{padding:9px 14px;font-size:12.5px;font-weight:600;text-align:center}
.ruban.ambre{background:var(--signal-clair);color:#8A5D00;border-bottom:1px solid #EBD9A8}
.ruban.rouge{background:var(--alerte-clair);color:var(--alerte);border-bottom:1px solid #F0C9C5}
.ruban button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}

main{max-width:620px;margin:0 auto;padding:16px 14px 0}
.titre-sec{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 10px}
.titre-sec h2{margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em}
.titre-sec .aide{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ardoise)}

.carte{background:var(--surface);border-radius:var(--r);border:1px solid var(--trait);margin-bottom:10px;overflow:hidden}
.vide{background:var(--surface);border:1px dashed var(--trait);border-radius:var(--r);padding:26px 20px;
  text-align:center;color:var(--ardoise);font-size:13.5px}
.vide b{display:block;color:var(--encre);font-size:15px;margin-bottom:4px}

.lot{display:flex;align-items:stretch}
.lot-corps{flex:1;padding:11px 12px;min-width:0}
.lot-nom{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.lot-meta{font-family:var(--mono);font-size:11px;color:var(--ardoise);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.lot-prix{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding:11px 12px;
  background:#F5F9FA;border-left:1px solid var(--trait);min-width:96px}
.lot-prix .v{font-family:var(--mono);font-size:19px;font-weight:700;letter-spacing:-.03em}
.lot-prix .u{font-family:var(--mono);font-size:9.5px;color:var(--ardoise);text-transform:uppercase;letter-spacing:.08em}
.lot-pied{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--trait);background:#FAFCFC}

.compteur{display:flex;align-items:center;gap:9px;margin-left:auto}
.cbtn{width:38px;height:38px;border-radius:8px;border:1px solid var(--trait);background:#fff;color:var(--encre);
  font-size:19px;font-weight:600;cursor:pointer;line-height:1}
.cbtn:active{background:var(--maree-clair)} .cbtn:disabled{opacity:.32;cursor:not-allowed}
.cval{font-family:var(--mono);font-size:17px;font-weight:700;min-width:26px;text-align:center}
.cval.zero{color:var(--trait)}

.champs{padding:12px}
.rangee{display:flex;gap:8px;margin-bottom:8px}
.rangee>*{flex:1;min-width:0}
label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ardoise);margin-bottom:4px;font-weight:600}
input,select{width:100%;padding:10px 11px;border:1px solid var(--trait);border-radius:8px;background:#fff;
  color:var(--encre);font-family:var(--sans);font-size:15px}
input.num,select.num{font-family:var(--mono)}
input:focus,select:focus{outline:2px solid var(--maree);outline-offset:-1px;border-color:var(--maree)}

.btn{display:block;width:100%;padding:13px;border:0;border-radius:9px;cursor:pointer;background:var(--maree);
  color:#fff;font-family:var(--sans);font-size:15px;font-weight:600}
.btn:active{filter:brightness(.9)} .btn:disabled{background:#B4C6CA;cursor:not-allowed}
.btn.creux{background:#fff;color:var(--encre);border:1px solid var(--trait)}
.btn.creux:active{background:var(--fond)}
.btn.rouge{background:var(--alerte)}
.btn.petit{width:auto;padding:8px 13px;font-size:13px}
.lien{background:none;border:0;color:var(--maree);font-family:var(--sans);font-size:13px;font-weight:600;
  cursor:pointer;padding:0;text-decoration:underline}
.lien.danger{color:var(--alerte)} .lien.neutre{color:var(--ardoise)}

.quai{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.97);
  border-top:1px solid var(--trait);padding:11px 14px calc(11px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.quai-in{max-width:620px;margin:0 auto}
.quai-tot{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px}
.quai-tot .l{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ardoise);font-weight:600}
.quai-tot .v{font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:-.03em}

.puce{display:inline-block;padding:3px 8px;border-radius:20px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.puce.vert{background:var(--maree-clair);color:#00695F}
.puce.ambre{background:var(--signal-clair);color:#8A5D00}
.puce.rouge{background:var(--alerte-clair);color:var(--alerte)}
.puce.gris{background:var(--fond);color:var(--ardoise)}
.puce.violet{background:#EBE7F3;color:var(--violet)}

.pesee{padding:12px;border-bottom:1px solid var(--trait)}
.pesee:last-child{border-bottom:0}
.pesee-nom{font-weight:700;font-size:15px}
.pesee-sub{font-family:var(--mono);font-size:11px;color:var(--ardoise);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.balance{display:flex;align-items:flex-end;gap:10px;margin-top:10px}
.balance-c{flex:1}
.balance-l{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ardoise);font-weight:600;margin-bottom:4px}
.balance-fixe{font-family:var(--mono);font-size:19px;font-weight:700;padding:10px 11px;background:var(--fond);
  border-radius:8px;border:1px solid var(--trait);color:var(--ardoise)}
.balance input{font-family:var(--mono);font-size:19px;font-weight:700;padding:10px 11px}
.ecart{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;
  border-top:1px dashed var(--trait);font-family:var(--mono);font-size:13px}
.ecart .m{font-size:16px;font-weight:700}

.ligne{display:flex;align-items:center;gap:11px;padding:12px;border-bottom:1px solid var(--trait);width:100%;
  background:none;border-left:0;border-right:0;border-top:0;text-align:left;font-family:var(--sans);cursor:pointer}
.ligne:last-child{border-bottom:0}
.ligne:active{background:#F5F9FA}
.ligne.fixe{cursor:default}
.ligne-c{flex:1;min-width:0}
.ligne-t{font-size:15px;font-weight:600}
.ligne-s{font-size:12.5px;color:var(--ardoise);margin-top:1px}
.ligne-d{text-align:right;flex-shrink:0}
.ligne-m{font-family:var(--mono);font-size:15px;font-weight:700}

.bloc-texte{font-family:var(--mono);font-size:12px;line-height:1.6;white-space:pre-wrap;background:var(--encre);
  color:#D7E4E8;padding:13px;border-radius:8px;max-height:230px;overflow:auto}
.note{font-size:12.5px;color:var(--ardoise);padding:0 4px;margin:10px 0 18px}
.sep{height:1px;background:var(--trait);margin:18px 2px}
.barre-prog{height:4px;background:var(--fond);border-radius:2px;overflow:hidden;margin-top:6px}
.barre-prog i{display:block;height:100%;background:var(--maree)}
.barre-prog i.plein{background:var(--alerte)}

/* --- accueil / authentification --- */
.accueil{max-width:440px;margin:0 auto;padding:34px 18px 40px}
.accueil-marque{font-size:40px;font-weight:700;letter-spacing:-.045em;text-align:center;line-height:1}
.accueil-marque span{color:var(--maree)}
.accueil-slogan{text-align:center;color:var(--ardoise);font-size:15px;margin:9px 0 22px;line-height:1.4}
.fanion{display:flex;justify-content:center;margin:14px 0 0}
.fanion span{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:20px;
  background:var(--maree);color:#fff;
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;
}
.fanion svg{width:15px;height:15px;flex-shrink:0}
.bascule{display:flex;gap:6px;background:var(--fond);padding:4px;border-radius:10px;margin-bottom:14px;
  border:1px solid var(--trait)}
.bascule button{flex:1;border:0;border-radius:7px;padding:9px;background:none;color:var(--ardoise);
  font-family:var(--sans);font-size:13.5px;font-weight:600;cursor:pointer}
.bascule button.on{background:#fff;color:var(--encre);box-shadow:0 1px 3px rgba(10,33,41,.1)}
.erreur{background:var(--alerte-clair);color:var(--alerte);border-radius:8px;padding:10px 12px;
  font-size:13px;font-weight:600;margin-bottom:10px}

/* --- tuiles de statistiques --- */
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}
.tuile{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:13px}
.tuile .l{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--ardoise);font-weight:600}
.tuile .v{font-family:var(--mono);font-size:25px;font-weight:700;letter-spacing:-.035em;margin-top:5px;line-height:1}
.tuile .u{font-family:var(--mono);font-size:11px;color:var(--ardoise);margin-top:3px}
.tuile.large{grid-column:1 / -1;background:var(--encre);border-color:var(--encre);color:#fff}
.tuile.large .l{color:#8FA5AC} .tuile.large .u{color:#8FA5AC}
.tuile.large .v{font-size:34px;color:#fff}

/* --- plans --- */
.plan{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:14px;margin-bottom:10px}
.plan.actuel{border-color:var(--maree);border-width:2px;padding:13px}
.plan-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan-nom{font-size:17px;font-weight:700;letter-spacing:-.02em}
.plan-prix{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.plan-prix small{font-size:10.5px;font-weight:600;color:var(--ardoise);letter-spacing:0}
.plan-desc{font-size:13px;color:var(--ardoise);margin-top:5px}
.plan-liste{list-style:none;padding:0;margin:11px 0 0;font-size:13.5px}
.plan-liste li{padding:4px 0 4px 20px;position:relative}
.plan-liste li:before{content:"";position:absolute;left:2px;top:11px;width:9px;height:2px;background:var(--maree);border-radius:1px}
.conso{display:flex;justify-content:space-between;font-size:12.5px;margin-top:12px}
.conso .num{font-weight:700}

.toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%) translateY(10px);background:var(--encre);
  color:#fff;padding:11px 18px;border-radius:22px;font-size:13.5px;font-weight:600;z-index:99;opacity:0;
  pointer-events:none;transition:opacity .22s,transform .22s;max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}


/* --- messagerie --- */
.fil{display:flex;flex-direction:column;gap:9px;padding:14px 12px;min-height:120px}
.bulle{max-width:78%;padding:9px 12px;border-radius:14px;font-size:14.5px;line-height:1.45;word-wrap:break-word}
.bulle .h{display:block;font-family:var(--mono);font-size:10px;opacity:.72;margin-top:4px;letter-spacing:.04em}
.bulle.moi{align-self:flex-end;background:var(--maree);color:#fff;border-bottom-right-radius:4px}
.bulle.lui{align-self:flex-start;background:var(--fond);color:var(--encre);border-bottom-left-radius:4px}
.bulle .ref{display:block;font-family:var(--mono);font-size:10px;opacity:.8;margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.07em}
.saisie{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--trait);background:#FAFCFC}
.saisie textarea{flex:1;min-height:42px;max-height:120px;resize:vertical;padding:10px 11px;
  border:1px solid var(--trait);border-radius:9px;font-family:var(--sans);font-size:15px;
  background:#fff;color:var(--encre)}
.saisie textarea:focus{outline:2px solid var(--maree);outline-offset:-1px;border-color:var(--maree)}
.saisie button{flex-shrink:0;align-self:flex-end;width:44px;height:42px;border:0;border-radius:9px;
  background:var(--maree);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.saisie button:disabled{background:#B4C6CA;cursor:not-allowed}
.saisie button svg{width:19px;height:19px}
.contacts{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--trait)}
.contacts a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px;border-radius:9px;text-decoration:none;font-size:13.5px;font-weight:600;
  border:1px solid var(--trait);background:#fff;color:var(--encre)}
.contacts a.wa{background:#25D366;border-color:#25D366;color:#fff}
.contacts a svg{width:17px;height:17px}