/* =====================================================================
   app.css — feuille de style de l'application
   Palette tirée du logo : bleu marine #002963, or #C38F25.
   ===================================================================== */
body{margin:0;padding:0;background:var(--blanc);display:block;min-height:100dvh}

:root{
  --or:#B8862A;   --or-f:#915608; --or-b:#754506; --or-c:#D9A93A;
  --bleu:#002E72; --bleu-c:#0168CA;
  --vert:#4A841F;
  --encre:#10151F; --gris:#5D6779; --gris-c:#8B95A6;
  --surface:#EEF2F9; --bord:#D8E0EC; --blanc:#fff;
  --lao:'Noto Sans Lao','Leelawadee UI','Phetsarath OT',sans-serif;
  --lat:'Archivo',system-ui,sans-serif;
  --cjk:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  --thai:'Noto Sans Thai','Leelawadee UI','Tahoma',sans-serif;
  --kr:'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--lat);
  background:
    radial-gradient(900px 520px at 50% -190px, #E2EAF6 0%, transparent 70%),
    #F3F6FB;
  color:var(--encre);
  min-height:100dvh;
  display:block;
  padding:0;
}
html[data-l="lo"] body{font-family:var(--lao)}
html[data-l="zh"] body{font-family:var(--cjk)}
html[data-l="th"] body{font-family:var(--thai)}
html[data-l="ko"] body{font-family:var(--kr)}

/* ---------- chrome autour du téléphone ---------- */






.langs{display:flex;flex-wrap:wrap;border:1px solid var(--bord);border-radius:999px;overflow:hidden;background:#fff}
.langs button{
  font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.3px;
  padding:8px 11px;border:0;background:none;color:var(--gris);cursor:pointer;
}
.langs button[aria-pressed="true"]{background:var(--bleu);color:#fff}
.langs button:focus-visible{outline:2px solid var(--or-f);outline-offset:-2px}

/* barre de vitesse tirée du logo */






/* ---------- téléphone ---------- */

.screen{
  background:var(--blanc);overflow:hidden;
  width:100%;height:100%;display:flex;flex-direction:column;position:relative;
  border-radius:26px;
}
.status{
  height:30px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;font-size:11px;font-weight:600;color:#fff;background:var(--bleu);
  font-family:var(--lat);
}
.status .dots{display:flex;gap:3px}
.status .dots span{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.8)}

.head{
  flex:none;padding:14px 18px 12px;border-bottom:1px solid var(--bord);
  display:flex;align-items:center;gap:11px;min-height:56px;
}
.head .bk{
  width:32px;height:32px;flex:none;border:1px solid var(--bord);border-radius:9px;background:#fff;
  cursor:pointer;color:var(--bleu);display:grid;place-items:center;font-size:15px;line-height:1;
}
.head .bk:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.head h2{font-size:16px;font-weight:700;line-height:1.25}
.head .sub{font-size:11.5px;color:var(--gris);margin-top:1px;font-weight:400}

.body{flex:1;overflow-y:auto;padding:18px}
.body::-webkit-scrollbar{width:0}

.view{display:none;flex-direction:column;height:100%}
.view.on{display:flex;animation:slide .22s ease-out}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.view.on{animation:none}}

/* ---------- accueil ---------- */
#v-home .body{display:flex;flex-direction:column;justify-content:center;padding:0}
.hero{padding:26px 20px 22px;text-align:center;flex:none}
.hero img{width:118px;height:118px;border-radius:50%;margin:0 auto 14px;display:block}
.hero .slog{font-size:16.5px;font-weight:700;line-height:1.4;color:var(--bleu);padding:0 6px}
.choice{padding:6px 18px 20px;display:flex;flex-direction:column;gap:12px}
.pick{
  width:100%;text-align:left;font:inherit;cursor:pointer;
  border:1.5px solid var(--bord);border-radius:var(--r);background:#fff;
  padding:17px 18px;display:flex;align-items:center;gap:14px;
}
.pick:hover{border-color:var(--bleu-c)}
.pick:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.pick .ic{width:44px;height:44px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:21px}
.pick.a .ic{background:#E7EDFA;color:var(--bleu)}
.pick.b .ic{background:#FBF1DC;color:var(--or-f)}
.pick strong{display:block;font-size:15.5px;font-weight:700;line-height:1.3}
.pick span{display:block;font-size:12.5px;color:var(--gris);margin-top:3px;line-height:1.4}

/* ---------- catégories ---------- */
.zone{display:flex;gap:7px;overflow-x:auto;padding-bottom:14px;margin-bottom:4px}
.zone.ctry{padding-bottom:11px;margin-bottom:2px}
.zone.ctry button{border-color:var(--or-c);color:var(--or-f);font-weight:700}
.zone.ctry button[aria-pressed="true"]{background:var(--or-f);border-color:var(--or-f);color:#fff}
.zone::-webkit-scrollbar{height:0}
.zone button{
  font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  padding:8px 15px;border-radius:999px;border:1.5px solid var(--bord);background:#fff;color:var(--gris);
}
.zone button[aria-pressed="true"]{background:var(--bleu);border-color:var(--bleu);color:#fff}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cat{
  font:inherit;cursor:pointer;text-align:left;background:#fff;
  border:1.5px solid var(--bord);border-radius:var(--r);padding:15px 14px;
}
.cat:hover{border-color:var(--bleu-c)}
.cat:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.cat em{font-style:normal;font-size:23px;display:block;margin-bottom:9px;line-height:1}
.cat b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.cat i{display:block;font-style:normal;font-size:11.5px;color:var(--gris-c);margin-top:4px}

/* ---------- annonces ---------- */
.live{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--or-f);margin-bottom:13px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--or-f);animation:pulse 1.9s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){.dot{animation:none}}
.ad{
  width:100%;text-align:left;font:inherit;cursor:pointer;background:#fff;
  border:1px solid var(--bord);border-left:4px solid var(--or-c);border-radius:12px;
  padding:14px 15px;margin-bottom:11px;display:block;
}
.ad:hover{border-color:var(--bleu-c);border-left-color:var(--or)}
.ad:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.ad .r1{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ad .nm{font-size:14.5px;font-weight:700}
.ad .vf{font-size:10.5px;font-weight:600;color:#3A6A18;background:#EDF5E4;padding:2px 7px;border-radius:5px}
.ad .tx{font-size:13px;line-height:1.55;color:#2B3444}
.orig{font-size:11.5px;font-style:italic;color:var(--gris-c);margin-top:6px}
.blk .orig{font-size:12px;margin-top:10px}
.calling .appel-direct{flex:none;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;max-width:320px;margin:10px auto 4px;padding:16px 18px;text-decoration:none;box-sizing:border-box}
.calling .note{color:rgba(255,255,255,.8)}
.appel-direct span{font-size:15px}
.appel-direct b{font-size:24px;letter-spacing:.04em;font-family:var(--lat)}
.lien{background:none;border:0;padding:6px 0 0;font:inherit;font-size:12.5px;font-weight:600;color:var(--bleu-c);text-decoration:underline;cursor:pointer}
#fx-tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad .r2{display:flex;gap:12px;margin-top:9px;font-size:11.5px;color:var(--gris-c)}
.ad .r2 .no{margin-left:auto;font-weight:600;color:var(--gris)}

/* ---------- fiche ---------- */
.who{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--bord);margin-bottom:16px}
.av{width:60px;height:60px;flex:none;border-radius:50%;background:var(--bleu);color:#fff;display:grid;place-items:center;font-size:23px;font-weight:700;font-family:var(--lat)}
.who h3{font-size:17px;font-weight:700}
.who p{font-size:12.5px;color:var(--gris);margin-top:3px}
.blk{background:var(--surface);border-radius:12px;padding:14px 15px;margin-bottom:14px}
.blk p{font-size:13.5px;line-height:1.6}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13px;border-bottom:1px solid var(--bord)}
.kv:last-child{border:0}
.kv span:first-child{color:var(--gris)}
.kv span:last-child{font-weight:600;text-align:right}
.warn{font-size:11.5px;color:var(--gris);line-height:1.55;padding:11px 13px;border:1px dashed var(--bord);border-radius:10px}

.foot{flex:none;padding:13px 18px 16px;border-top:1px solid var(--bord);display:flex;gap:10px;background:#fff}
.btn{
  flex:1;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  padding:14px 16px;border-radius:12px;border:1.5px solid transparent;
}
.btn:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
.btn.p{background:var(--or-f);color:#fff}
.btn.p:hover{background:var(--or-b)}
.btn.s{background:#fff;border-color:var(--bord);color:var(--bleu)}
.btn.s:hover{border-color:var(--bleu-c)}
.btn.n{background:var(--bleu);color:#fff}
.btn.n:hover{background:var(--bleu-c)}
.btn.w{flex:none;width:auto;padding:14px 18px}

/* ---------- appel ---------- */
.calling{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bleu);color:#fff;padding:30px}
.calling .av{width:88px;height:88px;background:rgba(255,255,255,.16);font-size:32px}
.calling h3{font-size:20px;font-weight:700}
.calling .st{font-size:14px;opacity:.85}
.calling 

/* ---------- prestataire ---------- */
.wallet{
  background:linear-gradient(135deg,#002E72 0%,#0168CA 100%);
  color:#fff;border-radius:var(--r);padding:18px;margin-bottom:16px;position:relative;overflow:hidden;
}
.wallet::after{content:"";position:absolute;right:-26px;top:-26px;width:110px;height:110px;border-radius:50%;background:rgba(217,169,58,.26)}
.wallet .lb{font-size:11.5px;opacity:.85;position:relative}
.wallet .vl{font-size:38px;font-weight:800;line-height:1.05;margin-top:4px;position:relative;font-family:var(--lat)}
.wallet .un{font-size:13px;font-weight:600;margin-left:7px;opacity:.9}
.ask{font-size:15.5px;font-weight:700;line-height:1.4;margin-bottom:13px}
.stack{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.mine{border:1px solid var(--bord);border-radius:12px;padding:14px 15px}
.mine .t{font-size:11.5px;color:var(--gris);margin-bottom:6px}
.mine .c{font-size:13.5px;line-height:1.55}
.mes-annonces{display:flex;flex-direction:column;gap:10px}
.mes-annonces .vide{font-size:13px;color:var(--gris)}
.mon-ad{border-top:1px solid var(--bord);padding-top:10px}
.mon-ad:first-child{border-top:0;padding-top:0}
.mon-ad .l1{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--gris);flex-wrap:wrap}
.mon-ad .l1 b{color:var(--encre)}
.mon-ad .tx{font-size:13px;line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mon-ad .et{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:#EDF5E4;color:#3A6A18}
.mon-ad .et.off{background:#F1F2F4;color:var(--gris)}
.mon-ad .et.ko{background:#FBEAEA;color:#8E1B1B}
.flash-ad{margin-top:8px;font:inherit;font-size:13px;font-weight:700;padding:8px 14px;border-radius:9px;border:1.5px solid var(--or);background:#FFF6E3;color:var(--or-f);cursor:pointer}
.flash-ad:disabled{border-color:var(--bord);background:#F1F2F4;color:var(--gris);cursor:default}
.count{font-size:11.5px;color:var(--gris-c);margin-top:8px;text-align:right}

.prog{display:flex;gap:5px;margin:14px 0 6px}
.prog i{flex:1;height:7px;border-radius:4px;background:var(--bord)}
.prog i.d{background:var(--or-c)}
.prog i.a{background:var(--or-f)}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:16px}
.stat div{background:var(--surface);border-radius:11px;padding:13px 14px}
.stat .n{font-size:25px;font-weight:800;font-family:var(--lat);line-height:1}
.stat .l{font-size:11.5px;color:var(--gris);margin-top:5px}

.tier{
  width:100%;text-align:left;font:inherit;cursor:pointer;background:#fff;
  border:1.5px solid var(--bord);border-radius:12px;padding:14px 15px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tier:hover{border-color:var(--bleu-c)}
.tier:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.tier>span:first-child{display:flex;flex-direction:column;min-width:0}
.tier .l1{display:block;font-size:15px;font-weight:700;font-family:var(--lat)}
.tier .l2{display:block;font-size:11.5px;color:var(--gris);margin-top:3px}
.tier .rt{text-align:right;flex:none}
.tier .pr{font-size:14px;font-weight:700;font-family:var(--lat)}
.tier .sv{font-size:11px;font-weight:600;color:#3A6A18;background:#EDF5E4;padding:2px 7px;border-radius:5px;display:inline-block;margin-top:4px}

.flashbar{
  /* Dans le flux, sous la barre d'état : visible sur toutes les pages,
     sans masquer l'en-tête ni ses boutons (décision du 17/09/2026). */
  position:relative;flex:none;z-index:40;overflow:hidden;
  margin:0 10px;max-height:0;opacity:0;
  background:#fff;border:1px solid var(--bord);border-left:4px solid var(--or-f);
  border-radius:13px;padding:0 14px;
  box-shadow:0 10px 24px -14px rgba(0,41,99,.45);
  transition:max-height .35s ease,opacity .35s ease,margin .35s ease,padding .35s ease;
  display:flex;gap:11px;align-items:flex-start;cursor:pointer;
}
.flashbar.on{max-height:160px;opacity:1;margin:8px 10px 4px;padding:12px 14px 14px}
/* tant qu'il est masque, le bandeau ne doit rien laisser depasser en haut */
.flashbar[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.flashbar{transition:none}}
.flashbar .fx-temps{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--or-c);transform-origin:left}
.flashbar.on .fx-temps{animation:fx-temps var(--fx-duree,120s) linear forwards}
@keyframes fx-temps{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.view.on{min-height:0}
.ad .badge-flash{font-size:10.5px;font-weight:800;color:#fff;background:var(--or-f);padding:2px 7px;border-radius:5px;font-family:var(--lat)}
.flashbar .tg{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;color:#fff;background:var(--or-f);
  padding:3px 7px;border-radius:5px;flex:none;margin-top:1px;font-family:var(--lat);text-transform:uppercase;
}
.flashbar .bd{flex:1;min-width:0}
.flashbar .bd b{display:block;font-size:13.5px;font-weight:700;line-height:1.3}
.flashbar .bd span{display:block;font-size:12px;color:#2B3444;line-height:1.5;margin-top:3px}
.flashbar .x{
  flex:none;border:0;background:none;cursor:pointer;color:var(--gris-c);
  font-size:16px;line-height:1;padding:2px 2px 2px 6px;font-family:var(--lat);
}
.fxbtn{
  width:100%;font:inherit;cursor:pointer;text-align:left;
  border:1.5px solid var(--or-c);border-radius:var(--r);background:#FFFCF5;
  padding:15px 16px;display:flex;align-items:flex-start;gap:13px;margin-top:14px;
}
.fxbtn .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fxbtn:hover{border-color:var(--or-f)}
.fxbtn:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.fxbtn .ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--or-f);color:#fff;display:grid;place-items:center;font-size:19px}
.fxbtn b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.fxbtn i{display:block;font-style:normal;font-size:11.5px;color:var(--gris);margin-top:3px;line-height:1.45}
.fxbtn .cost{flex:none;font-family:var(--lat);font-size:13.5px;font-weight:800;color:var(--or-f);white-space:nowrap}
.pay{
  width:100%;text-align:left;font:inherit;cursor:pointer;background:#fff;
  border:1.5px solid var(--bord);border-radius:var(--r);padding:16px 16px;margin-bottom:11px;
  display:flex;align-items:center;gap:14px;
}
.pay:hover{border-color:var(--bleu-c)}
.pay:focus-visible{outline:2px solid var(--or-f);outline-offset:2px}
.pay .mk{
  width:54px;height:38px;white-space:pre-line;flex:none;border-radius:7px;display:grid;place-items:center;
  font-family:var(--lat);font-size:10.5px;font-weight:800;letter-spacing:.2px;line-height:1.1;text-align:center;
}
.pay .mk.lap{background:#E4EBF6;color:var(--bleu)}
.pay .mk.up{background:var(--bleu);color:#fff}
.pay b{display:block;font-size:14.5px;font-weight:700;line-height:1.3}
.pay i{display:block;font-style:normal;font-size:11.5px;color:var(--gris);margin-top:3px;line-height:1.45}
.paytag{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--bleu);
  background:var(--surface);padding:7px 13px;border-radius:999px;margin-bottom:14px;
}
.qr{width:168px;height:168px;margin:6px auto 14px;border-radius:12px;background:
  repeating-linear-gradient(0deg,var(--encre) 0 8px,#fff 8px 16px),
  repeating-linear-gradient(90deg,var(--encre) 0 8px,#fff 8px 16px);
  background-blend-mode:difference;border:8px solid #fff;box-shadow:0 0 0 1px var(--bord)}
.center{text-align:center}

/* ---------- pied de page ---------- */
.note{
  max-width:520px;margin-top:26px;text-align:center;font-family:var(--lat);
  font-size:12.5px;line-height:1.7;color:var(--gris);
}



/* ---------- bandeau d'état ---------- */
#etat{
  flex:none;padding:11px 18px;font-size:12.5px;line-height:1.45;font-weight:600;
  border-bottom:1px solid var(--bord);
}
#etat.info{background:var(--surface);color:var(--bleu)}
#etat.erreur{background:#FBEAEA;color:#8E1B1B;border-bottom-color:#F0C9C9}
.bandeau[hidden]{display:none}

/* ---------- sélecteur de langue en pied d'accueil ---------- */
#langues{flex-wrap:wrap;overflow:visible}
#langues button{font-size:12px;padding:6px 12px}

/* ---------- images d'annonce ---------- */
.galerie{display:flex;gap:8px;margin-bottom:16px}
.galerie:empty{display:none}
.galerie img{
  flex:1;min-width:0;aspect-ratio:4/3;object-fit:cover;
  border-radius:11px;border:1px solid var(--bord);background:var(--surface);
}
.ad .vign{display:flex;gap:6px;margin-top:9px}
.ad .vign img{
  width:62px;height:48px;object-fit:cover;border-radius:7px;
  border:1px solid var(--bord);background:var(--surface);
}


/* =====================================================================
   Gabarit de page : panneau de presentation a gauche, telephone a droite.
   Sous 900 px le panneau passe au-dessus ; sous 560 px le telephone
   occupe tout l'ecran, sans cadre.
   ===================================================================== */
.plateau{
  max-width:1120px;margin:0 auto;padding:34px 20px 46px;
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  gap:48px;align-items:start;
}
.phone{
  width:400px;height:760px;flex:none;
  background:#0B1424;border-radius:34px;padding:11px;
  box-shadow:0 26px 60px rgba(8,22,48,.26);
}

/* ---------- panneau de presentation ---------- */
.cote{padding-top:8px}
.cote .marque{width:96px;height:96px;border-radius:50%;display:block;margin-bottom:20px}
.cote h1{font-size:31px;line-height:1.2;font-weight:800;color:var(--bleu);margin-bottom:12px}
.cote .intro{font-size:15.5px;line-height:1.65;color:var(--gris);max-width:46ch;margin-bottom:26px}

.etapes{list-style:none;counter-reset:none;margin-bottom:26px;max-width:52ch}
.etapes li{
  position:relative;padding:14px 16px 14px 18px;margin-bottom:10px;
  background:#fff;border:1px solid var(--bord);border-radius:var(--r);
  border-left:4px solid var(--or);
}
.etapes li b{display:block;font-size:15px;font-weight:700;color:var(--encre);line-height:1.35}
.etapes li span{display:block;font-size:13.5px;line-height:1.6;color:var(--gris);margin-top:4px}

.dl{
  font:inherit;cursor:pointer;border:0;border-radius:var(--r);
  background:var(--bleu);color:#fff;padding:17px 26px;
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;
  min-width:280px;
}
.dl span{font-size:16.5px;font-weight:700}
.dl i{font-style:normal;font-size:12.5px;font-weight:500;color:#A9C4E4}
.dl:disabled{background:var(--surface);color:var(--gris-c);cursor:not-allowed;
  border:1.5px dashed var(--bord)}
.dl:disabled i{color:var(--or-f)}
.dl:not(:disabled):hover{background:#00256a}

.cote .maj{font-size:13px;line-height:1.6;color:var(--gris);margin-top:16px;max-width:46ch}
.cote .essai{font-size:13px;color:var(--bleu-c);font-weight:600;margin-top:6px}

@media (max-width:900px){
  .plateau{grid-template-columns:minmax(0,1fr);gap:34px;justify-items:center;
    padding:24px 16px 40px}
  .cote{max-width:480px;text-align:left;order:2}
  .phone{order:1}
  .cote .essai{display:none}
}
@media (max-width:560px){
  .plateau{padding:0;gap:0}
  .phone{width:100%;height:100dvh;padding:0;border-radius:0;box-shadow:none;background:none}
  .screen{border-radius:0}
  .cote{padding:26px 18px 40px;max-width:none;width:100%}
  .cote h1{font-size:25px}
  .dl{width:100%;min-width:0;align-items:center}
}


/* =====================================================================
   Ecran de paiement par QR BCEL
   ===================================================================== */
.somme{
  background:var(--bleu);color:#fff;border-radius:var(--r);
  padding:16px 18px;margin-bottom:16px;text-align:center;
}
.somme .lb{font-size:12px;font-weight:600;color:#A9C4E4;letter-spacing:.3px}
.somme .vl{font-size:31px;font-weight:800;line-height:1.15;margin-top:5px;
  font-variant-numeric:tabular-nums}
.somme .pour{font-size:13px;color:#CBDCF0;margin-top:5px}
.somme .pour b{font-weight:700;color:#fff}

.qrbloc{
  background:#fff;border:1.5px solid var(--bord);border-radius:var(--r);
  padding:14px;margin-bottom:16px;text-align:center;
}
.qrbloc .banque{
  display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:10px;
}
.qrbloc .banque b{font-size:21px;font-weight:800;color:var(--bleu);letter-spacing:.5px}
.qrbloc .banque span{font-size:11.5px;font-weight:600;color:var(--or-f);
  letter-spacing:1px}
.qrbloc img{
  width:100%;max-width:270px;height:auto;display:block;margin:0 auto;
  border-radius:9px;
}

.pas{list-style:none;margin-bottom:14px;counter-reset:p}
.pas li{
  counter-increment:p;position:relative;padding:9px 0 9px 34px;
  font-size:14px;line-height:1.5;border-bottom:1px solid var(--bord);
}
.pas li:last-child{border-bottom:0}
.pas li::before{
  content:counter(p);position:absolute;left:0;top:8px;
  width:23px;height:23px;border-radius:50%;background:var(--surface);
  color:var(--bleu);font-size:12.5px;font-weight:700;
  display:grid;place-items:center;font-family:var(--lat);
}
.pas li.fort{font-weight:700;color:var(--or-b)}
.pas li.fort::before{background:var(--or);color:#fff}


/* =====================================================================
   Envoi de la preuve de paiement
   ===================================================================== */
.p2{font-size:14px;line-height:1.6;color:var(--gris);margin-bottom:16px}
.depot{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:2px dashed var(--bord);border-radius:var(--r);
  padding:26px 16px;margin-bottom:16px;cursor:pointer;background:#fff;
  font-size:14.5px;font-weight:600;color:var(--bleu);text-align:center;
}
.depot:hover{border-color:var(--bleu-c);background:var(--surface)}
.depot .ic{font-size:26px;line-height:1}
.apercu{margin-bottom:16px;text-align:center}
.apercu img{
  max-width:100%;max-height:280px;border-radius:var(--r);
  border:1px solid var(--bord);display:block;margin:0 auto 10px;
}
.champ{margin-bottom:16px}
.champ label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.champ input{
  width:100%;font:inherit;font-size:19px;font-weight:700;text-align:center;
  border:1.5px solid var(--bord);border-radius:var(--r);padding:13px;
  font-variant-numeric:tabular-nums;color:var(--bleu);background:#fff;
}
.champ input:focus{outline:2px solid var(--bleu-c);border-color:var(--bleu-c)}
.sst{font-size:14px;font-weight:700;color:var(--bleu);margin:20px 0 10px}
.envois:empty::after{content:'—';color:var(--gris-c);font-size:13px}
.envoi{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:10px 12px;border:1px solid var(--bord);border-radius:10px;
  margin-bottom:8px;font-size:13px;background:#fff;
}
.envoi .q{font-weight:700;color:var(--encre)}
.envoi .e{color:var(--gris);text-align:right}
.envoi.attente{border-left:4px solid var(--or)}
.envoi.validee{border-left:4px solid var(--vert)}
.envoi.validee .e{color:#3A6A18;font-weight:600}
.envoi.refusee{border-left:4px solid #8E1B1B}
.envoi.refusee .e{color:#8E1B1B;font-weight:600}

/* =====================================================================
   Règle de sûreté : l'attribut hidden doit toujours l'emporter sur un
   display posé par une classe. Sans elle, un élément masqué en HTML
   reste visible — c'est ce qui laissait le bandeau flash dépasser en
   haut de l'écran et la zone de dépôt s'afficher sous l'aperçu.
   ===================================================================== */
[hidden]{display:none !important}

/* Application installée : pas de bloc « installer l'application ». */
html.installee .cote{display:none !important}
@media (display-mode: standalone){ .cote{display:none !important} }

/* =====================================================================
   Messagerie (lot du 18 septembre 2026)
   Écrans volontairement dépouillés : une personne qui cherche du
   travail doit comprendre l'écran sans qu'on le lui explique.
   ===================================================================== */

.pick.c .ic{background:#E8F3E4;color:var(--vert)}
.pick.c{position:relative}
.pastille{
  position:absolute;top:10px;right:12px;min-width:20px;height:20px;padding:0 6px;
  border-radius:10px;background:var(--or-f);color:#fff;font:700 11px/20px var(--lat);
  text-align:center;
}

/* --- mur : une personne --- */
.pers{
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  padding:13px 14px;margin-bottom:10px;
}
.pers-h{display:flex;align-items:center;gap:11px}
.pers-h .av{width:42px;height:42px;font-size:17px}
.pers-i{display:flex;flex-direction:column;gap:2px;min-width:0}
.pers-i strong{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pers-i span{font-size:12px;color:var(--gris)}
.pers-p{font-size:13.5px;line-height:1.55;margin-top:9px}
.pers-s{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tag{
  font-size:11.5px;padding:3px 8px;border-radius:9px;
  background:var(--surface);color:var(--bleu);border:1px solid var(--bord);
}
.pers .btn{width:100%;margin-top:11px;padding:11px}

/* --- secteurs du profil --- */
#pf-secteurs .sect{
  display:flex;align-items:center;gap:8px;text-align:left;
  background:var(--blanc);border:1px solid var(--bord);border-radius:12px;
  padding:11px 10px;font:inherit;font-size:12.5px;color:var(--encre);cursor:pointer;
}
#pf-secteurs .sect .ic{font-size:15px;color:var(--bleu)}
#pf-secteurs .sect[aria-pressed="true"]{
  border-color:var(--bleu);background:#E7EDFA;font-weight:700;
}
#pf-texte,#chat-saisie{
  width:100%;box-sizing:border-box;border:1px solid var(--bord);border-radius:12px;
  padding:12px;font:inherit;font-size:15px;resize:none;background:var(--blanc);color:var(--encre);
}
.bascule{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:13.5px}
.bascule input{width:18px;height:18px}

/* --- invitations reçues --- */
.invit{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#FFF7E8;border:1px solid var(--or-c);border-radius:var(--r);
  padding:11px 12px;margin-bottom:9px;
}
.invit .av{width:38px;height:38px;font-size:15px}
.invit-i{flex:1;min-width:110px;display:flex;flex-direction:column;gap:2px}
.invit-i strong{font-size:14.5px}
.invit-i span{font-size:11.5px;color:var(--gris)}
.invit-a{display:flex;gap:7px}
.invit-a .btn{padding:9px 13px;font-size:13px}

/* --- liste des conversations --- */
.conv{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:var(--blanc);border:1px solid var(--bord);border-radius:var(--r);
  padding:11px 12px;margin-bottom:8px;font:inherit;cursor:pointer;position:relative;
}
.conv:hover{border-color:var(--bleu-c)}
.conv .av{width:42px;height:42px;font-size:17px}
.conv-i{flex:1;min-width:0}
.conv-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.conv-h strong{font-size:14.5px}
.conv-h i{font-size:11px;color:var(--gris-c);font-style:normal}
.conv-i p{font-size:12.5px;color:var(--gris);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .pastille{position:static;flex:none}

/* --- fil d'une conversation --- */
.fil{display:flex;flex-direction:column;gap:9px;overflow-y:auto}
.bulle{
  max-width:82%;align-self:flex-start;background:var(--blanc);
  border:1px solid var(--bord);border-radius:14px 14px 14px 4px;padding:10px 12px;
}
.bulle.moi{align-self:flex-end;background:#E7EDFA;border-color:#C9D8F2;
  border-radius:14px 14px 4px 14px}
.bulle p{font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.bulle .orig{font-size:12px;color:var(--gris);margin-top:7px;
  padding-top:7px;border-top:1px dashed var(--bord)}
.bulle .retire{font-style:italic;color:var(--gris-c)}
.bulle-p{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px}
.bulle-p i{font-size:10.5px;color:var(--gris-c);font-style:normal}
.bulle-p .lien{font-size:11px;padding:0}
.chat-bl{margin-left:auto;font-size:12px}
.head .av.sm{width:34px;height:34px;font-size:14px;flex:none}
.foot.saisie{display:flex;gap:8px;align-items:flex-end}
.foot.saisie textarea{flex:1;max-height:110px}