:root{
  --brand:#6024F0; --brand-2:#8B3BFF; --brand-50:#f4efff; --brand-100:#e9e0ff; --brand-700:#4a14c4;
  --money:#0FB07A; --money-bg:#e6f9f1; --amber:#F5A623;
  --ink:#0D0B1F; --ink2:#56536b; --ink3:#6f6f7d; --line:#eeebf6; --soft:#faf9ff;
  --grad:linear-gradient(135deg,#6024F0,#9B4DFF);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:'Outfit','Segoe UI',system-ui,sans-serif;background:#ece7f6;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none}
h1,h2,h3,h4{font-family:'Outfit',sans-serif;letter-spacing:-.02em;line-height:1.1}
i[data-lucide]{width:1em;height:1em;stroke-width:2;pointer-events:none}
button{font-family:inherit}

.app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:520px;margin:0 auto;background:#fff}
.statusbar-pad{height:max(var(--sat),26px);background:#fff;flex-shrink:0}

.views{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;display:none;padding-bottom:14px}
.view.active{display:block;animation:fade .3s ease}
.view::-webkit-scrollbar{width:0}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 14px}
.topbar .greet{font-size:12px;color:var(--ink2);font-weight:500}
.topbar .name{font-family:'Outfit';font-size:22px;font-weight:700}
.topbar .right{display:flex;gap:8px;align-items:center}
.langchip{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 12px;border-radius:13px;background:var(--soft);border:1px solid var(--line);color:var(--ink);font-size:12px;font-weight:600;cursor:pointer}
.langchip i{width:16px;height:16px;color:var(--brand)}
.bell{width:42px;height:42px;border-radius:13px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);position:relative;cursor:pointer}
.bell i{width:20px;height:20px}
.bell.dot::after{content:'';position:absolute;top:11px;right:11px;width:7px;height:7px;background:var(--brand);border-radius:50%;border:1.5px solid #fff}

.sectit{font-family:'Outfit';font-size:16px;font-weight:700;margin:20px 18px 12px;display:flex;justify-content:space-between;align-items:center}
.sectit a{font-size:12.5px;color:var(--brand);font-weight:600;cursor:pointer}

.promo{margin:0 18px;border-radius:22px;background:var(--grad);color:#fff;padding:18px;position:relative;overflow:hidden}
.promo::after{content:'';position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.12);top:-60px;right:-40px;z-index:0;pointer-events:none;animation:promoFloat 9s ease-in-out infinite}
.promo::before{content:'';position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);bottom:-55px;left:-30px;z-index:0;pointer-events:none;animation:promoFloat2 12s ease-in-out infinite}
.promo>*{position:relative;z-index:1}
@keyframes promoFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-26px,22px) scale(1.14)}}
@keyframes promoFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.promo::after,.promo::before{animation:none}}
.promo .t{font-family:'Outfit';font-weight:700;font-size:17px;position:relative}
.promo .s{font-size:12.5px;opacity:.9;margin-top:3px;position:relative}
.promo .bar{height:7px;border-radius:10px;background:rgba(255,255,255,.25);margin-top:14px;overflow:hidden;position:relative}
.promo .bar i{display:block;height:100%;background:#fff;border-radius:10px;transition:width .5s ease}
.promo .resume{margin-top:14px;background:#fff;color:var(--brand-700);border:none;border-radius:12px;padding:11px 16px;font-weight:600;font-size:13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.promo .resume i{width:16px;height:16px}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px}
.qa{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:13px 6px;text-align:center;cursor:pointer;transition:.15s}
.qa:active{transform:scale(.95);background:var(--brand-50)}
.qa .ic{width:40px;height:40px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--brand);margin:0 auto 7px}
.qa .ic i{width:20px;height:20px}
.qa .l{font-size:10.5px;font-weight:600}

.clist{padding:0 18px}
.citem{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin-bottom:11px;cursor:pointer;transition:.15s}
.citem:active{transform:scale(.99);background:var(--soft)}
.cthumb{width:54px;height:54px;border-radius:14px;background:var(--grad);display:grid;place-items:center;color:#fff;flex-shrink:0;font-family:'Outfit';font-weight:700;font-size:14px}
.cthumb.alt{background:linear-gradient(135deg,#0D0B1F,#3a1f78)}
.cthumb.g3{background:linear-gradient(135deg,#0FB07A,#36d39e)}
.citem .ct{font-weight:600;font-size:14px}
.citem .cs{font-size:11.5px;color:var(--ink3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.citem .cs span{display:inline-flex;align-items:center;gap:4px}.citem .cs i{width:12px;height:12px}
.citem .cs .off{color:var(--money)}
.citem .chev{margin-left:auto;color:var(--ink3)}.citem .chev i{width:20px;height:20px}

.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px}
/* Boutique verrouillée : aperçu flouté + cadenas */
.shop-teaser{position:relative;grid-column:1/-1;min-height:330px}
.shop-teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;filter:blur(6px);opacity:.55;pointer-events:none;user-select:none}
.shop-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:26px 22px;background:rgba(250,249,255,.8)}
.tb-dark .shop-lock{background:rgba(18,16,42,.82)}
.shop-lock .sl-ic{width:62px;height:62px;border-radius:20px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin-bottom:2px}
.tb-dark .shop-lock .sl-ic{background:rgba(96,36,240,.2)}
.shop-lock .sl-ic i{width:28px;height:28px}
.shop-lock .sl-t{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.3px}
.shop-lock .sl-s{font-size:13.5px;color:var(--ink2);line-height:1.5;max-width:32ch}
.tb-dark .shop-lock .sl-t{color:#fff}
.tb-dark .shop-lock .sl-s{color:#b9b4d6}
.shop-lock .sl-act{display:flex;flex-direction:column;gap:9px;width:100%;max-width:280px;margin-top:8px}
.sl-btn{width:100%;height:47px;border:none;border-radius:14px;background:var(--brand);color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sl-btn i{width:18px;height:18px}
.sl-btn:active{transform:scale(.98)}
.sl-btn.ghost{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.tb-dark .sl-btn.ghost{background:#241f3a;color:#EDEBFF;border-color:rgba(255,255,255,.12)}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:.15s}
.pcard:active{transform:scale(.98)}
.pcard .pimg{height:104px;background:linear-gradient(135deg,#f4efff,#faf9ff);display:grid;place-items:center;color:var(--brand);position:relative}
.pcard .pimg i{width:36px;height:36px;opacity:.5}
.pcard .pimg .tg{position:absolute;top:8px;left:8px;font-size:9.5px;color:#fff;background:var(--brand);padding:3px 8px;border-radius:100px;font-weight:600}
.pcard .pb{padding:12px}
.pcard h4{font-size:12px;font-weight:600;margin-bottom:7px;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:31px}
.pcard .pr{font-family:'Outfit';font-weight:700;font-size:15px}
.pcard .mg{font-size:10px;color:var(--money);font-weight:600;background:var(--money-bg);padding:3px 7px;border-radius:7px;display:inline-block;margin-top:6px}

.route-sel{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px 15px;margin:0 18px 16px}
.route-sel .leg{flex:1;text-align:center}
.route-sel .leg .lab{font-size:10px;color:var(--ink3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.route-sel .leg .val{font-size:14px;font-weight:600;font-family:'Outfit';margin-top:3px}
.route-sel .arrow{color:var(--brand)}.route-sel .arrow i{width:18px;height:18px}
.weightbox{margin:0 18px 18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.weightbox .wtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.weightbox .wtop .wl{font-size:13px;font-weight:600}
.weightbox .wtop .wv{font-family:'Outfit';font-size:22px;font-weight:800;color:var(--brand)}
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:10px;background:var(--brand-100);outline:none;margin-top:10px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--brand);cursor:pointer;border:4px solid #fff;box-shadow:0 3px 10px rgba(96,36,240,.4)}
.trlist{padding:0 18px}
.trcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:11px}
/* Zones de transitaires (séparation Chine/Dubaï/Europe/Nigeria) */
.tzone{margin-bottom:18px}
.tz-head{display:flex;align-items:center;gap:8px;margin:4px 0 10px}
.tz-flag{font-size:18px}
.tz-label{font-weight:800;font-size:15px}
.tz-count{margin-left:auto;background:var(--brand-50);color:var(--brand-700);font-weight:800;font-size:12px;min-width:22px;height:22px;border-radius:100px;display:grid;place-items:center;padding:0 6px}
.tz-empty{background:#fff;border:1px dashed var(--line);border-radius:16px;padding:16px;text-align:center;color:var(--ink3);font-size:13px}
.tz-lock{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 16px;text-align:center;box-shadow:0 4px 14px rgba(13,11,31,.05)}
.tzl-ic{width:48px;height:48px;border-radius:14px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin:0 auto 12px}
.tzl-ic i{width:24px;height:24px}
.tzl-t{font-weight:800;font-size:15px}
.tzl-s{font-size:12.5px;color:var(--ink2);line-height:1.5;margin:5px auto 14px;max-width:300px}
.tzl-act{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.tzl-btn{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:#fff;border:none;border-radius:100px;padding:11px 18px;font-weight:700;font-size:13.5px;cursor:pointer}
.tzl-btn i{width:16px;height:16px}
.tzl-btn.ghost{background:#fff;color:var(--brand-700);border:1.5px solid var(--line)}
.tzl-btn:active{transform:scale(.97)}
/* Bannière « Tout débloquer » */
.transit-all{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--brand),#7c5cff);color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:16px;box-shadow:0 8px 22px rgba(109,40,217,.25)}
.transit-all .ta-tx{flex:1;min-width:0}
.transit-all .ta-t{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15px}
.transit-all .ta-t i{width:18px;height:18px}
.transit-all .ta-s{font-size:12px;opacity:.92;margin-top:2px}
.transit-all .ta-btn{flex-shrink:0;background:#fff;color:var(--brand);border:none;border-radius:100px;padding:10px 16px;font-weight:800;font-size:14px;cursor:pointer}
.transit-all .ta-btn:active{transform:scale(.96)}
/* Transitaire verrouillé (aperçu) */
.trcard.locked{opacity:.96}
.trcard.locked .trtop{filter:none}
.tr-lock{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);flex-wrap:wrap}
.tr-lockmsg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink3)}
.tr-lockmsg i{width:14px;height:14px}
/* Rappel formation sous une zone */
.tz-formhint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:12px;padding:10px 12px;margin-top:4px;line-height:1.4}
.tz-formhint > i{width:17px;height:17px;color:var(--brand);flex-shrink:0}
.tz-formhint span{flex:1}
.tz-formhint a{color:var(--brand);font-weight:800;cursor:pointer;white-space:nowrap}
.tb-dark .tz-lock,.tb-dark .tz-empty{background:#1b1b22}
.tb-dark .tzl-btn.ghost{background:#1b1b22;border-color:#2c2746}
.trcard.best{border-color:var(--brand);box-shadow:0 8px 22px rgba(96,36,240,.12)}
.trcard .trtop{display:flex;align-items:flex-start;gap:12px}
.trcard .av{width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:'Outfit';font-weight:700;font-size:14px;flex-shrink:0}
.trcard h4{font-size:14px;font-weight:700}
.trcard .meta{font-size:11px;color:var(--ink2);margin-top:3px;display:flex;gap:8px}
.trcard .meta .star{color:var(--amber)}
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--money);background:var(--money-bg);padding:3px 8px;border-radius:100px;margin-top:5px}
.vbadge i{width:12px;height:12px}
.trcard .badge-best{margin-left:auto;font-size:10px;font-weight:600;color:#fff;background:var(--brand);padding:4px 9px;border-radius:100px;flex-shrink:0}
.trcard .calc{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.trcard .calc .lab{font-size:11px;color:var(--ink2)}
.trcard .calc .tot{font-family:'Outfit';font-size:18px;font-weight:800}
.trcard .calc .book{background:var(--brand);color:#fff;border:none;border-radius:11px;padding:10px 15px;font-weight:600;font-size:12.5px;cursor:pointer}

.profhead{text-align:center;padding:8px 18px 18px}
.profhead .ava{width:84px;height:84px;border-radius:28px;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:'Outfit';font-weight:700;font-size:30px;margin:0 auto 12px;box-shadow:0 12px 30px rgba(96,36,240,.3)}
.profhead h3{font-size:19px;font-weight:700}
.profhead .mail{font-size:12.5px;color:var(--ink3);margin-top:2px}
.profhead .planbadge{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:100px}
.profhead .planbadge i{width:14px;height:14px;color:var(--amber)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 18px 6px}
.pstat{background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:14px 8px;text-align:center}
.pstat .n{font-family:'Outfit';font-size:20px;font-weight:800}
.pstat .l{font-size:10px;color:var(--ink2);margin-top:2px}
.menu{padding:14px 18px 0}
.mrow{display:flex;align-items:center;gap:13px;padding:15px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.mrow:active{opacity:.6}
.mrow .ic{width:38px;height:38px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center}
.mrow .ic i{width:18px;height:18px}
.mrow .ml{font-size:14px;font-weight:600;flex:1}
.mrow .chev{color:var(--ink3)}.mrow .chev i{width:18px;height:18px}

/* SHEETS */
.sheet{position:fixed;inset:0;max-width:520px;margin:0 auto;background:#fff;z-index:80;transform:translateX(100vw);transition:transform .3s cubic-bezier(.3,.8,.35,1);overflow-y:auto;display:flex;flex-direction:column}
.sheet.open{transform:none}
.sheet::-webkit-scrollbar{width:0}
.sheet-top{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:5;display:flex;align-items:center;gap:12px;padding:calc(max(var(--sat),26px) + 10px) 18px 12px}
.backbtn{width:40px;height:40px;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.backbtn i{width:20px;height:20px}
.sheet-top .stt{font-family:'Outfit';font-weight:700;font-size:16px}
.dlbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:11px;padding:9px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.dlbtn i{width:16px;height:16px;color:var(--brand)}
.dlbtn.done{background:var(--money-bg);border-color:transparent;color:var(--money)}
.dlbtn.done i{color:var(--money)}
.cover-lg{height:170px;margin:0 18px;border-radius:22px;background:var(--grad);position:relative;display:flex;align-items:flex-end;padding:16px;color:#fff}
.cover-lg.alt{background:linear-gradient(135deg,#0D0B1F,#3a1f78)}
.cover-lg.g3{background:linear-gradient(135deg,#0FB07A,#36d39e)}
.cover-lg .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.cover-lg .play i{width:28px;height:28px;margin-left:3px}
.cover-lg .flag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.95);color:var(--ink);font-size:11px;font-weight:600;padding:5px 11px;border-radius:100px}
.dbody{padding:16px 18px 20px;flex:1}
.dbody h2{font-size:21px;font-weight:800;margin-bottom:8px}
.dbody .dmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.dbody .dmeta span{font-size:11.5px;color:var(--brand-700);background:var(--brand-50);padding:5px 11px;border-radius:100px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.dbody .dmeta i{width:13px;height:13px}
.dbody p.desc{font-size:13.5px;color:var(--ink2);line-height:1.6;margin-bottom:18px}
.modtit{font-family:'Outfit';font-weight:700;font-size:15px;margin-bottom:12px}
.mod{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px;margin-bottom:9px;cursor:pointer}
.mod.done{background:var(--soft)}
.mod .mi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.mod.done .mi{background:var(--money-bg);color:var(--money)}
.mod .mi.lock{background:var(--soft);color:var(--ink3)}
.mod .mi.playm{background:var(--brand-50);color:var(--brand)}
.mod .mi i{width:17px;height:17px}
.mod .mt{font-size:13px;font-weight:600}
.mod .ms{font-size:11px;color:var(--ink3)}
.mod .mnum{margin-left:auto;font-size:11px;color:var(--ink3)}

.bottom-cta{position:sticky;bottom:0;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:14px 18px calc(14px + var(--sab));display:flex;gap:10px;align-items:center}
.bottom-cta .btn-main{flex:1;background:var(--brand);color:#fff;border:none;border-radius:13px;padding:15px;font-weight:600;font-size:14.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.bottom-cta .btn-main.ghost{flex:0 0 auto;background:var(--soft);color:var(--brand-700);border:1px solid var(--line)}
.bottom-cta .btn-main i{width:18px;height:18px}

.pdimg{height:280px;flex-shrink:0;margin:0 18px;border-radius:22px;background:linear-gradient(135deg,#f4efff,#ece2ff);display:grid;place-items:center;color:var(--brand)}
.pdimg i{width:72px;height:72px;opacity:.5}
.pdinfo{padding:16px 18px;flex:1}
.pdinfo .tg{font-size:11px;color:#fff;background:var(--brand);padding:4px 10px;border-radius:100px;font-weight:600;display:inline-block;margin-bottom:10px}
.pdinfo h2{font-size:22px;font-weight:800;margin-bottom:12px}
.pdrow{display:flex;gap:10px;margin-bottom:18px}
.pdbox{flex:1;background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:13px;text-align:center}
.pdbox .l{font-size:10.5px;color:var(--ink2)}
.pdbox .v{font-family:'Outfit';font-weight:800;font-size:17px;margin-top:3px}
.pdbox.m .v{color:var(--money)}

/* tracking */
.ofbanner{display:flex;align-items:center;gap:8px;margin:0 18px 14px;background:var(--money-bg);color:#0a7a55;border-radius:13px;padding:11px 13px;font-size:12px;font-weight:600}
.ofbanner i{width:16px;height:16px}
.trackcard{margin:0 18px 14px;background:var(--grad);color:#fff;border-radius:20px;padding:16px;position:relative;overflow:hidden}
.trackcard::after{content:'';position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.1);top:-50px;right:-30px}
.trackcard .tnum{font-size:11px;opacity:.85;position:relative}
.trackcard h4{font-size:16px;font-weight:700;margin:2px 0 12px;position:relative}
.trackcard .trow{display:flex;justify-content:space-between;font-size:12px;margin-top:7px;position:relative}
.trackcard .trow .v{font-weight:600}
.timeline{padding:4px 18px 14px}
.tstep{display:flex;gap:14px;position:relative;padding-bottom:22px}
.tstep .marker{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;z-index:2;background:var(--soft);color:var(--ink3);border:2px solid var(--line)}
.tstep .marker i{width:15px;height:15px}
.tstep.done .marker{background:var(--money);color:#fff;border-color:var(--money)}
.tstep.current .marker{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 5px var(--brand-50)}
.tstep::before{content:'';position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--line)}
.tstep.done::before{background:var(--money)}
.tstep:last-child{padding-bottom:0}
.tstep:last-child::before{display:none}
.tstep .tinfo .tt{font-size:13.5px;font-weight:600}
.tstep.pending .tinfo .tt{color:var(--ink3)}
.tstep .tinfo .ts{font-size:11.5px;color:var(--ink3);margin-top:1px}

/* tabbar */
.tabbar{flex-shrink:0;height:64px;padding-bottom:var(--sab);box-sizing:content-box;background:rgba(255,255,255,.96);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink3);cursor:pointer;font-size:9.5px;font-weight:600;transition:.15s;padding:6px 10px;border-radius:12px}
.tab i{width:21px;height:21px}
.tab.on{color:var(--brand)}
.tab:active{transform:scale(.9)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(82px + var(--sab));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;padding:12px 18px;border-radius:100px;z-index:90;display:flex;align-items:center;gap:8px;opacity:0;transition:.3s;pointer-events:none;white-space:nowrap;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast i{width:16px;height:16px;color:var(--money)}

/* onboarding / splash overlay */
.onb{position:fixed;inset:0;z-index:200;background:var(--grad);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px 30px calc(40px + var(--sab))}
.onb.hide{display:none}
.onb .logo{width:88px;height:88px;border-radius:26px;background:rgba(255,255,255,.16);display:grid;place-items:center;margin-bottom:26px;border:1px solid rgba(255,255,255,.25)}
.onb .logo i{width:46px;height:46px;color:#fff}
.onb h1{font-size:34px;font-weight:800;margin-bottom:12px}
.onb p{font-size:15px;opacity:.92;max-width:320px;margin-bottom:32px;line-height:1.5}
.onb .langrow{display:flex;gap:10px;margin-bottom:22px}
.onb .lpick{padding:10px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.4);font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:#fff}
.onb .lpick.sel{background:#fff;color:var(--brand-700);border-color:#fff}
.onb .start{background:#fff;color:var(--brand-700);border:none;border-radius:14px;padding:16px 34px;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.onb .start i{width:18px;height:18px}

/* mobile money */
.momo-c{margin-bottom:16px}
.momo-c .h{font-family:'Outfit';font-weight:700;font-size:14px;margin-bottom:8px}
.momo-c .r{display:flex;justify-content:space-between;align-items:center;padding:10px 13px;background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-bottom:7px;font-size:13px}
.momo-c .r .fee{font-weight:700;color:var(--brand)}
.momo-c .r .fee.nc{color:var(--ink3);font-weight:500}

/* soon badge on course */
.cthumb.soon{opacity:.55}
.soontag{font-size:10.5px;color:var(--amber);background:var(--amber-bg);padding:3px 9px;border-radius:100px;font-weight:600}

/* ===== Ombres portées subtiles (délimitation des conteneurs) ===== */
.app{box-shadow:0 0 0 1px rgba(13,11,31,.03), 0 14px 60px rgba(13,11,31,.10)}
.statusbar-pad{background:#fff}
.promo{box-shadow:0 12px 28px rgba(96,36,240,.22)}
.qa{box-shadow:0 2px 7px rgba(13,11,31,.05)}
.citem{box-shadow:0 4px 14px rgba(13,11,31,.06)}
.pcard{box-shadow:0 4px 14px rgba(13,11,31,.06)}
.trcard{box-shadow:0 4px 14px rgba(13,11,31,.06)}
.trcard.best{box-shadow:0 8px 22px rgba(96,36,240,.16)}
.mod{box-shadow:0 1px 5px rgba(13,11,31,.04)}
.weightbox,.route-sel{box-shadow:0 4px 14px rgba(13,11,31,.06)}
.cover-lg{box-shadow:0 10px 26px rgba(96,36,240,.20)}
.trackcard{box-shadow:0 12px 28px rgba(96,36,240,.22)}
.pstat{box-shadow:0 2px 7px rgba(13,11,31,.05)}
.momo-c .r{box-shadow:0 1px 5px rgba(13,11,31,.04)}
.tabbar{box-shadow:0 -2px 16px rgba(13,11,31,.06)}
.bell,.langchip{box-shadow:0 2px 7px rgba(13,11,31,.05)}
.pdbox{box-shadow:0 2px 7px rgba(13,11,31,.05)}
.sheet-top{box-shadow:0 4px 14px rgba(13,11,31,.04)}

/* ===== Responsive : adaptation aux petits écrans ===== */
@media (max-width:380px){
  .topbar{padding:12px 14px}
  .topbar .name{font-size:20px}
  .quick{gap:8px;padding:14px}
  .qa{padding:11px 4px}
  .qa .l{font-size:10px}
  .qa .ic{width:36px;height:36px}
  .promo{margin:0 14px;padding:16px}
  .clist,.pgrid,.trlist,.route-sel,.weightbox{padding-left:14px;padding-right:14px}
  .route-sel,.weightbox{margin-left:14px;margin-right:14px}
  .pgrid{gap:10px}
  .sectit{margin:18px 14px 10px}
  .tab{font-size:9px;padding:6px 5px}
  .tab i{width:20px;height:20px}
}
@media (max-width:330px){
  .quick{grid-template-columns:repeat(4,1fr);gap:6px}
  .qa .l{font-size:9px}
  .tab span{font-size:8.5px}
}

/* ===== Auth (connexion / inscription) ===== */
.auth-form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px;margin-top:4px}
.auth-field input{width:100%;height:50px;border-radius:14px;border:1px solid rgba(255,255,255,.40);background:rgba(255,255,255,.12);color:#fff;padding:0 16px;font-size:15px;font-family:inherit;outline:none}
.auth-field input::placeholder{color:rgba(255,255,255,.72)}
.auth-forgot{text-align:right;margin:-4px 0 0}
.auth-forgot a{color:rgba(255,255,255,.92);font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.auth-error{color:#ffdada;font-size:13px;min-height:16px;margin:0;text-align:center}
.auth-submit{width:100%;justify-content:center;margin-top:2px}
.auth-switch{font-size:13px;color:rgba(255,255,255,.92);margin:0;text-align:center}
.auth-switch a{color:#fff;font-weight:700;text-decoration:underline;cursor:pointer}
.auth-skip{background:transparent;border:none;color:rgba(255,255,255,.85);font-size:13px;margin-top:2px;cursor:pointer;font-family:inherit;text-decoration:underline}

/* ===== Fil de promos / annonces (accueil) ===== */
.promo-item{margin:0 18px 10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 3px 12px rgba(13,11,31,.05)}
.promo-k{display:inline-block;font-size:10.5px;font-weight:700;color:var(--ink2);background:var(--soft);padding:3px 9px;border-radius:100px;margin-bottom:7px}
.promo-k.k-promo{background:#fff0e8;color:#e0470f}
.promo-tt{font-weight:700;font-size:14.5px;margin-bottom:3px}
.promo-bd{font-size:12.5px;color:var(--ink2);line-height:1.5}
.promo-cta{margin-top:10px;background:var(--brand);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}

/* ===== Crédits / paliers / fournisseurs ===== */
.creditchip{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 12px;border-radius:13px;background:var(--brand);color:#fff;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 2px 7px rgba(96,36,240,.3)}
.creditchip i{width:16px;height:16px}
.muted{color:var(--ink3);font-size:13px}

.wallet-bal{background:var(--grad);color:#fff;border-radius:18px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.wallet-bal .wb-l{font-size:12.5px;opacity:.9}
.wallet-bal .wb-n{font-family:'Outfit';font-weight:800;font-size:22px}
.pack{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer;box-shadow:0 3px 12px rgba(13,11,31,.05);transition:.15s}
.pack:active{transform:scale(.99);background:var(--soft)}
.pack .pk-t{font-weight:700;font-size:15px}
.pack .pk-s{font-size:12.5px;color:var(--ink2);margin-top:2px}
.pack .pk-bonus{color:var(--money);font-weight:700}
.pack .pk-price{font-family:'Outfit';font-weight:800;font-size:16px;color:var(--brand)}
.pack .pk-mid{flex:1;min-width:0}
.pack .pk-go{display:inline-flex;align-items:center;gap:5px;background:rgba(37,211,102,.12);color:#1f9d50;font-weight:800;font-size:12.5px;padding:8px 12px;border-radius:20px;flex-shrink:0}
.pack .pk-go i{width:15px;height:15px}
.tb-dark .pack .pk-go{background:rgba(37,211,102,.16);color:#37d375}
/* Encadré « comment recharger » */
.buy-how{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:16px;padding:14px 16px;margin:14px 0 4px}
.buy-how .bh-t{display:flex;align-items:center;gap:7px;font-weight:800;font-size:13.5px;color:var(--ink);margin-bottom:10px}
.buy-how .bh-t i{width:17px;height:17px;color:var(--brand)}
.bh-steps{counter-reset:bh;list-style:none;margin:0;padding:0}
.bh-steps li{counter-increment:bh;position:relative;padding:0 0 9px 30px;font-size:13px;color:var(--ink2);line-height:1.5}
.bh-steps li:last-child{padding-bottom:0}
.bh-steps li::before{content:counter(bh);position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;background:var(--brand);color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tb-dark .buy-how{background:#241f3a;border-color:#3a3358}

.tiers-cur{font-size:12.5px;color:var(--ink2);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 13px;margin-bottom:14px;font-weight:600}
.tier{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:12px;box-shadow:0 3px 12px rgba(13,11,31,.05)}
.tier.owned{border-color:var(--brand);box-shadow:0 8px 22px rgba(96,36,240,.12)}
.tier .tier-h{display:flex;justify-content:space-between;align-items:baseline}
.tier .tier-n{font-family:'Outfit';font-weight:800;font-size:18px}
.tier .tier-p{font-family:'Outfit';font-weight:800;font-size:18px;color:var(--brand)}
.tier .tier-p span{font-size:12px;color:var(--ink3);font-weight:500}
.tier .tier-perks{font-size:13px;color:var(--ink2);margin:8px 0 14px;line-height:1.5}
.tier .tier-cur{color:var(--brand);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:6px}
.tier .tier-cur i{width:16px;height:16px}
.tier .btn-main{width:100%}

.sup{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:11px;box-shadow:0 3px 12px rgba(13,11,31,.05)}
.sup .sup-h{display:flex;justify-content:space-between;align-items:center}
.sup .sup-n{font-weight:700;font-size:15px}
.sup .sup-m{font-size:12.5px;color:var(--ink2);margin-top:4px}
.sup .sup-c{font-size:12.5px;color:var(--brand);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px}
.sup .sup-c i{width:14px;height:14px}
.sup .sup-note{font-size:12px;color:var(--ink3);margin-top:6px}

.paywall{text-align:center;padding:30px 20px}
.paywall .pw-ic{width:64px;height:64px;border-radius:20px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;margin:0 auto 16px}
.paywall .pw-ic i{width:30px;height:30px}
.paywall .pw-t{font-family:'Outfit';font-weight:800;font-size:18px;margin-bottom:6px}
.paywall .pw-s{font-size:13.5px;color:var(--ink2);margin-bottom:20px}
.paywall .pw-actions{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:0 auto}
.paywall .pw-hint{display:inline-flex;align-items:center;gap:7px;margin:16px auto 0;max-width:300px;font-size:12px;color:var(--ink2);background:var(--brand-50);border:1px solid var(--brand-100);border-radius:12px;padding:9px 12px;line-height:1.4}
.paywall .pw-hint i{width:15px;height:15px;color:var(--brand);flex-shrink:0}
.paywall .btn-main{width:100%}

.gate{margin:0 18px 14px;background:var(--brand-50);border:1px solid var(--brand-100);border-radius:14px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.gate .gate-tx{font-size:12.5px;font-weight:600;color:var(--brand-700);display:flex;align-items:center;gap:6px}
.gate .gate-tx i{width:15px;height:15px}
.gate .gate-act{display:flex;gap:8px}
.gate .gate-act button{background:var(--brand);color:#fff;border:none;border-radius:9px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.gate .gate-act button.ghost{background:#fff;color:var(--brand-700);border:1px solid var(--brand-100)}

/* ===== Bannière hors-ligne ===== */
.offline-bar{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff3e0;color:#9a5b00;font-size:12px;font-weight:600;padding:8px 12px;flex-shrink:0}
.dl-banner{display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--brand),#7c5cff);color:#fff;padding:9px 12px;font-size:12.5px;font-weight:600;flex-shrink:0}
.dl-banner > i{width:18px;height:18px;flex-shrink:0}
.dl-banner span{flex:1;line-height:1.3}
.dl-btn{background:#fff;color:var(--brand-700);font-weight:800;font-size:12px;padding:6px 14px;border-radius:100px;white-space:nowrap;text-decoration:none}
.dl-btn:active{transform:scale(.96)}
.dl-x{background:transparent;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:2px;display:grid;place-items:center;flex-shrink:0}
.dl-x i{width:16px;height:16px}
.offline-bar i{width:15px;height:15px}

/* ===== Parrainage ===== */
.refbanner{display:flex;align-items:center;gap:12px;margin:14px 18px 0;background:var(--grad);color:#fff;border-radius:18px;padding:14px 16px;cursor:pointer;box-shadow:0 10px 24px rgba(96,36,240,.22)}
.refbanner .rb-ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0}
.refbanner .rb-ic i{width:22px;height:22px}
.refbanner .rb-tx{flex:1}
.refbanner .rb-t{font-weight:700;font-size:14.5px}
.refbanner .rb-s{font-size:12px;opacity:.92;margin-top:2px}
.refbanner > i{width:20px;height:20px;opacity:.85}
.temubanner{display:flex;align-items:center;gap:12px;margin:14px 18px 0;background:linear-gradient(135deg,#ff7a1a,#ff5400);color:#fff;border-radius:18px;padding:14px 16px;cursor:pointer;box-shadow:0 10px 24px rgba(255,106,0,.26)}
.temubanner .tb-ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex-shrink:0;font-size:22px}
.temubanner .rb-tx{flex:1}
.temubanner .rb-t{font-weight:700;font-size:14.5px}
.temubanner .rb-s{font-size:12px;opacity:.93;margin-top:2px}
.temubanner > i{width:20px;height:20px;opacity:.9}
.temubanner:active{transform:scale(.97)}
.temucard{margin:8px 18px 0;border-radius:20px;padding:16px;color:#fff;background:linear-gradient(135deg,#ff7a1a,#ff5400);box-shadow:0 12px 26px rgba(255,106,0,.26)}
.temucard .tc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.temucard .tc-logo{font-weight:800;font-size:16px}
.temucard .tc-badge{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.22);padding:4px 10px;border-radius:100px}
.temucard .tc-t{font-weight:800;font-size:17px}
.temucard .tc-s{font-size:12.5px;line-height:1.5;opacity:.95;margin-top:4px}
.temucard .tc-actions{display:flex;gap:9px;margin-top:13px;flex-wrap:wrap}
.temucard .tc-btn{flex:1;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:#d24500;border:none;border-radius:100px;padding:11px;font-weight:800;font-size:13px;cursor:pointer}
.temucard .tc-btn i{width:16px;height:16px}
.temucard .tc-btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.temucard .tc-btn:active{transform:scale(.97)}
.ref-hero{text-align:center;background:var(--grad);color:#fff;border-radius:20px;padding:22px 18px;margin-bottom:14px}
.ref-hero .ref-code-l{font-size:12.5px;opacity:.9}
.ref-hero .ref-code{font-family:'Outfit';font-weight:800;font-size:30px;letter-spacing:2px;margin:6px 0 16px}
.ref-hero .btn-main{background:#fff;color:var(--brand-700);width:100%}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ref-stat{background:var(--soft);border:1px solid var(--line);border-radius:15px;padding:14px;text-align:center}
.ref-stat .n{font-family:'Outfit';font-weight:800;font-size:24px;color:var(--brand)}
.ref-stat .l{font-size:11.5px;color:var(--ink2);margin-top:2px}

/* ===== Vague A : historique wallet, contact transitaire, oeil mot de passe ===== */
.tx{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px}
.tx .tx-t{font-size:13px;font-weight:600}
.tx .tx-d{font-size:11px;color:var(--ink3);margin-top:2px}
.tx .tx-a{font-family:'Outfit';font-weight:800;font-size:14px}
.tx .tx-a.pos{color:var(--money)}
.tx .tx-a.neg{color:var(--ink)}
.tr-contact{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.tr-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:9px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.tr-btn i{width:15px;height:15px;color:var(--brand)}
.tr-btn.wa{background:#e7f8f1;border-color:transparent;color:#0a7a55}
.tr-btn.wa i{color:#0a7a55}
.auth-field.pw{position:relative}
.auth-field.pw input{padding-right:48px}
.pw-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(255,255,255,.85);cursor:pointer;padding:8px;display:grid;place-items:center}
.pw-eye i{width:20px;height:20px}

/* ============ VAGUE 1 VISUELLE ============ */
:root{ --ink3:#6f6f7d; --money-ink:#0a7a55; --amber-ink:#9a5b00; --amber-bg:#fff3e0; }

/* Contraste des infos clés (lisibilité plein soleil, WCAG AA) */
.pcard .mg{ color:var(--money-ink); background:#d6f2e5; font-size:11px; }
.citem .cs .off{ color:var(--money-ink); }
.vbadge{ color:var(--money-ink); background:#d6f2e5; font-size:11px; }
.trcard .meta .star{ color:var(--amber-ink); }
.tx .tx-a.pos{ color:var(--money-ink); }

/* Feedback tactile sur tous les boutons / onglets */
.btn-main,.book,.resume,.start,.tr-btn,.gate .gate-act button,.promo-cta,.creditchip,.pack{ transition:transform .12s ease, filter .12s ease, background .15s ease; }
.btn-main:active,.book:active,.resume:active,.start:active,.creditchip:active,.langchip:active,.bell:active,.gate .gate-act button:active,.promo-cta:active,.tr-btn:active,.pack:active,.tab:active,.backbtn:active,.refbanner:active{ transform:scale(.96); filter:brightness(.96); }

/* États désactivés */
.btn-main:disabled,.book:disabled,.start:disabled{ opacity:.55; pointer-events:none; }

/* Plancher de lisibilité des micro-textes */
.tab{ font-size:10px; }
.pcard .pimg .tg{ font-size:10px; }
.pstat .l,.qa .l{ font-size:11px; }
.citem .cs{ font-size:12px; }

/* Cibles tactiles >= 44px */
.tab{ min-width:56px; padding:8px 10px; }
.gate .gate-act button{ min-height:40px; padding:9px 14px; }
.promo-cta{ min-height:40px; }

/* Placeholders d'images colorés */
.pcard .pimg{ position:relative; }
.pcard .pimg i{ opacity:1; color:#fff; width:42px; height:42px; }
.cthumb .flag-emo{ font-size:26px; line-height:1; }

/* Skeletons de chargement */
@keyframes shimmer{ 100%{ background-position:-200% 0; } }
.skel{ background:linear-gradient(90deg,#ece9f5 25%,#f6f4fc 37%,#ece9f5 63%); background-size:200% 100%; animation:shimmer 1.3s linear infinite; border-radius:16px; }
.skel-card{ height:80px; margin:0 18px 11px; }
.skel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 18px; }
.skel-tile{ height:150px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.spin{ animation:spin .8s linear infinite; display:inline-block; }

/* Ne pas rétrécir le texte sur petits écrans (réduire les marges, pas la police) */
@media (max-width:380px){ .qa .l{ font-size:11px; } .tab{ font-size:10px; } .tab span{ font-size:10px; } }
@media (max-width:330px){ .qa .l{ font-size:10.5px; } }

/* Images / placeholders colorés : remplissage + icône blanche */
.pcard .pimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdimg{position:relative;overflow:hidden}
.pdimg i{color:#fff;opacity:1}
.pdimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Mon compte (édition) */
.acc-body{padding:18px 16px 44px}
.acc-sec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--ink2);margin:0 2px 12px}
.acc-body .auth-field{margin-bottom:11px}
/* La feuille « Modifier mon compte » est sur fond clair : les champs .auth-field sont
   stylés pour l'écran de connexion SOMBRE (texte + placeholder blancs). Sans surcharge,
   le texte saisi et les placeholders sont blancs sur blanc = invisibles → le formulaire
   paraît vide/incomplet. On repasse en texte foncé sur champ clair. */
.acc-body .auth-field input{border:1px solid var(--line);background:var(--soft);color:var(--ink)}
.acc-body .auth-field input::placeholder{color:var(--ink3)}
.acc-body .auth-field input:focus{border-color:var(--brand)}
.acc-body .btn-main{width:100%;justify-content:center;margin-top:4px}
.acc-hint{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--ink2);line-height:1.45;margin:2px 2px 14px}
.acc-hint > i{width:15px;height:15px;flex-shrink:0;margin-top:1px;color:var(--brand)}

/* Pied de page légal (profil) */
.legal-foot{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 0 4px;font-size:12.5px;color:var(--ink2)}
.legal-foot a{color:var(--ink2);font-weight:600;text-decoration:underline;cursor:pointer}
.legal-foot a:active{color:var(--brand)}

/* Témoignages (preuve sociale) */
.testi-wrap{margin:22px 2px 4px}
.testi-title{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--ink);margin:0 4px 12px}
.testi-title > i{width:17px;height:17px;color:var(--brand)}
.testi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:10px;box-shadow:0 2px 10px rgba(20,10,40,.04)}
.testi-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.testi-ava{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),#7c5cff)}
.testi-id{min-width:0}
.testi-n{font-size:13.5px;font-weight:700;color:var(--ink)}
.testi-n span{font-weight:500;color:var(--ink2)}
.testi-stars{font-size:12.5px;color:#f5a623;letter-spacing:1px}
.testi-tx{font-size:13px;line-height:1.55;color:var(--ink2);font-style:italic}
.testi-res{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;font-weight:700;color:var(--brand);background:rgba(109,40,217,.08);padding:4px 9px;border-radius:20px}
.testi-res > i{width:13px;height:13px}

/* Quiz d'auto-évaluation */
.quiz-intro{ font-size:13px; color:var(--ink2); line-height:1.5; margin:2px 2px 16px; }
.quiz-q{ margin:0 0 18px; }
.quiz-qn{ font-size:14.5px; font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:10px; }
.quiz-opt{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; margin-bottom:8px; cursor:pointer; transition:.12s; background:var(--card); }
.quiz-opt:active{ transform:scale(.99); }
.quiz-radio{ width:18px; height:18px; border-radius:50%; border:2px solid var(--ink3); flex-shrink:0; }
.quiz-opt.chosen{ border-color:var(--brand); background:var(--brand-50); }
.quiz-opt.chosen .quiz-radio{ border-color:var(--brand); background:var(--brand); box-shadow:inset 0 0 0 3px #fff; }
.quiz-optt{ flex:1; font-size:13.5px; color:var(--ink); line-height:1.45; }
.quiz-opt > i{ width:18px; height:18px; flex-shrink:0; }
.quiz-opt.correct{ border-color:#1f9d50; background:rgba(37,211,102,.10); }
.quiz-opt.correct .quiz-optt{ color:#137a3a; font-weight:600; }
.quiz-opt.correct > i{ color:#1f9d50; }
.quiz-opt.correct .quiz-radio, .quiz-opt.wrong .quiz-radio{ display:none; }
.quiz-opt.wrong{ border-color:#e5484d; background:rgba(229,72,77,.08); }
.quiz-opt.wrong > i{ color:#e5484d; }
.quiz-result{ border-radius:16px; padding:18px; text-align:center; margin:0 0 20px; color:#fff; }
.quiz-result.good{ background:linear-gradient(135deg,#1f9d50,#37d375); }
.quiz-result.bad{ background:linear-gradient(135deg,#e8820c,#f5a623); }
.qr-score{ font-family:'Outfit'; font-weight:800; font-size:34px; line-height:1; }
.qr-pct{ font-size:13.5px; font-weight:600; margin-top:6px; opacity:.95; }
#quiz-body .btn-main{ width:100%; justify-content:center; margin-top:6px; }

/* Guide de démarrage (checklist) */
.checklist{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; margin:14px 0; box-shadow:0 4px 14px rgba(13,11,31,.05); }
.cl-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.cl-t{ display:flex; align-items:center; gap:7px; font-weight:800; font-size:14.5px; color:var(--ink); }
.cl-t i{ width:18px; height:18px; color:var(--brand); }
.cl-cnt{ font-family:'Outfit'; font-weight:800; font-size:13px; color:var(--brand); background:var(--brand-50); padding:3px 10px; border-radius:100px; }
.cl-bar{ height:6px; background:var(--soft); border-radius:100px; overflow:hidden; margin-bottom:14px; }
.cl-bar i{ display:block; height:100%; background:var(--grad); border-radius:100px; transition:width .3s; }
.cl-row{ display:flex; align-items:center; gap:11px; padding:10px 0; cursor:pointer; border-top:1px solid var(--line); }
.cl-row:first-of-type{ border-top:none; padding-top:0; }
.cl-ic{ width:32px; height:32px; border-radius:10px; background:var(--soft); color:var(--ink2); display:grid; place-items:center; flex-shrink:0; }
.cl-ic i{ width:16px; height:16px; }
.cl-row.done .cl-ic{ background:var(--money-bg); color:var(--money); }
.cl-tx{ flex:1; font-size:13.5px; color:var(--ink); font-weight:600; line-height:1.35; }
.cl-row.done .cl-tx{ color:var(--ink2); text-decoration:line-through; font-weight:500; }
.cl-arr{ width:16px; height:16px; color:var(--ink3); flex-shrink:0; }
.checklist.done{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--money-bg); border-color:transparent; }
.cl-donetx{ flex:1; display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:700; color:var(--money-ink,var(--money)); }
.cl-donetx i{ width:19px; height:19px; flex-shrink:0; }
.cl-dismiss{ background:none; border:none; color:var(--ink3); cursor:pointer; padding:4px; flex-shrink:0; }
.cl-dismiss i{ width:18px; height:18px; }

/* Certificat de réussite */
.certif-body{padding:16px 16px 44px}
.certif-hint{font-size:13px;color:var(--ink2);line-height:1.55;margin:2px 6px 16px;text-align:center}
.certif-frame{border-radius:14px;overflow:hidden;box-shadow:0 10px 34px rgba(109,40,217,.20);background:#fff;border:1px solid var(--line)}
.certif-frame canvas{width:100%;height:auto;display:block}
.certif-actions{display:flex;gap:10px;margin-top:18px}
.certif-actions .btn-main{flex:1;justify-content:center}
.certif-btn{margin-top:9px}

.pdgal{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pdgal::-webkit-scrollbar{display:none}
.pdgi{flex:0 0 100%;height:100%;scroll-snap-align:center;position:relative}
.pdgi img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pddots{position:absolute;bottom:11px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2;pointer-events:none}
.pddots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pddots span.on{background:#fff;width:18px;border-radius:3px}
/* Recherche boutique */
.shopsearch{display:flex;align-items:center;gap:9px;margin:10px 18px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px}
.shopsearch > i{width:18px;height:18px;color:var(--ink3);flex-shrink:0}
.shopsearch input{flex:1;border:none;outline:none;background:transparent;font-size:14px;font-family:inherit;color:var(--ink)}
.shopsearch .clr{cursor:pointer;color:var(--ink3)}
.tb-dark .shopsearch{background:#1b1b22;border-color:#2c2746}
/* Bouton partage (fiche produit) */
.sharebtn{margin-left:auto;width:40px;height:40px;border-radius:12px;background:var(--brand-50);color:var(--brand);display:grid;place-items:center;cursor:pointer}
.sharebtn i{width:19px;height:19px}
.sharebtn:active{transform:scale(.94)}
.tb-dark .sharebtn{background:#241f3a}
/* Onboarding « Aurora » (écrans d'accueil animés, glissables) */
.onboard{position:fixed;inset:0;z-index:999;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#2b0f63,#5a25e6 50%,#a23bff);background-size:100% 200%;
  animation:obBg 12s ease-in-out infinite, obIn .35s ease}
@keyframes obIn{from{opacity:0}to{opacity:1}}
@keyframes obBg{0%,100%{background-position:0 0}50%{background-position:0 100%}}
.ob-amb{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.ob-orb{position:absolute;border-radius:50%;filter:blur(34px)}
.ob-orb.o1{width:220px;height:220px;background:#ff7ae0;opacity:.5;top:-50px;right:-50px;animation:obDrift1 9s ease-in-out infinite}
.ob-orb.o2{width:200px;height:200px;background:#7affe4;opacity:.38;bottom:90px;left:-60px;animation:obDrift2 11s ease-in-out infinite}
.ob-sheen{position:absolute;inset:-60%;z-index:1;pointer-events:none;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.08),transparent 28%);animation:obSpin 18s linear infinite}
.ob-p{position:absolute;bottom:-14px;border-radius:50%;background:rgba(255,255,255,.72);animation:obRise linear infinite}
.ob-screen{position:absolute;inset:0;z-index:3;overflow:hidden;touch-action:pan-y;cursor:grab}
.ob-screen:active{cursor:grabbing}
.ob-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.ob-slide{flex:0 0 100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 30px 200px}
.ob-content{display:flex;flex-direction:column;align-items:center;max-width:360px}
.ob-content>*{opacity:0;transform:translateY(22px) scale(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.ob-slide.active .ob-content>*{opacity:1;transform:none}
.ob-slide.active .ob-content>*:nth-child(1){transition-delay:.05s}
.ob-slide.active .ob-content>*:nth-child(2){transition-delay:.18s}
.ob-slide.active .ob-content>*:nth-child(3){transition-delay:.30s}
.ob-stage{position:relative;width:120px;height:120px;display:grid;place-items:center;margin-bottom:30px}
.ob-glow{position:absolute;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 62%)}
.ob-slide.active .ob-glow{animation:obGlow 3.2s ease-in-out infinite}
.ob-ic{position:relative;z-index:1;width:100px;height:100px;border-radius:30px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);display:grid;place-items:center;box-shadow:0 12px 34px -8px rgba(0,0,0,.5),0 0 0 8px rgba(255,255,255,.06)}
.ob-slide.active .ob-ic{animation:obFloat 3.6s ease-in-out infinite}
.ob-ic i{width:48px;height:48px}
.ob-t{font-size:26px;font-weight:800;margin-bottom:12px;letter-spacing:-.4px;text-wrap:balance}
.ob-s{font-size:15px;line-height:1.55;opacity:.9}
.ob-ui{position:absolute;left:0;right:0;bottom:calc(max(var(--sab),20px) + 24px);z-index:6;display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 30px}
.ob-dots{display:flex;gap:7px}
.ob-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:.4s cubic-bezier(.34,1.56,.64,1)}
.ob-dots span.on{background:#fff;width:24px}
.ob-next{width:100%;max-width:360px;height:52px;background:#fff;color:#5a25e6;border:none;border-radius:16px;font-family:inherit;font-weight:800;font-size:16px;cursor:pointer;position:relative;overflow:hidden}
.ob-next:active{transform:scale(.98)}
.ob-next::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:obSheen 3.4s ease-in-out infinite}
.ob-skip{position:fixed;top:calc(max(var(--sat),18px) + 6px);right:18px;z-index:12;background:rgba(255,255,255,.16);color:#fff;border:none;border-radius:100px;padding:8px 16px;font-weight:700;font-size:13px;cursor:pointer}
@keyframes obDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,26px)}}
@keyframes obDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,-18px)}}
@keyframes obSpin{to{transform:rotate(360deg)}}
@keyframes obGlow{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.22);opacity:.95}}
@keyframes obFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(2.5deg)}}
@keyframes obSheen{0%,100%{left:-60%}55%,100%{left:130%}}
@keyframes obRise{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:.9}100%{transform:translateY(-92vh) scale(.5);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .onboard,.ob-orb,.ob-sheen,.ob-p,.ob-next::after{animation:none!important}
  .ob-slide.active .ob-ic,.ob-slide.active .ob-glow{animation:none!important}
}

/* Icône blanche sur placeholder coloré (cible aussi le <svg> rendu par Lucide) */
.pcard .pimg i, .pcard .pimg svg{ color:#fff; stroke:#fff; opacity:1; width:42px; height:42px; }
.pdimg i, .pdimg svg{ color:#fff; stroke:#fff; opacity:1; }

/* ============ VAGUE 2 : haut d'accueil désaturé ============ */
.refbanner{ background:var(--brand-50); color:var(--brand-700); box-shadow:0 3px 12px rgba(13,11,31,.05); }
.refbanner .rb-ic{ background:var(--brand); color:#fff; }
.refbanner .rb-t{ color:var(--brand-700); }
.refbanner .rb-s{ color:var(--ink2); opacity:1; }
.refbanner > i{ color:var(--brand); }

/* ============ MODE SOMBRE ============ */
body.tb-dark{
  --ink:#f3f1fb; --ink2:#bfbcd4; --ink3:#908da8; --line:#2a2742; --soft:#1d1a33;
  --brand-50:#241a45; --brand-100:#33285c; --money-bg:#12331f; --amber-bg:#3a2a10;
  background:#0f0d1c;
}
.tb-dark .app{ background:#15122a; }
.tb-dark .statusbar-pad{ background:#15122a; }
.tb-dark .citem,.tb-dark .pcard,.tb-dark .pcard .pb,.tb-dark .trcard,.tb-dark .pack,.tb-dark .tier,.tb-dark .sup,.tb-dark .tx,.tb-dark .weightbox,.tb-dark .promo-item,.tb-dark .sheet,.tb-dark .mod,.tb-dark .checklist{ background:#1d1a33; }
.tb-dark .mod.done{ background:#15122a; }
.tb-dark .qa .ic{ background:#15122a; }
.tb-dark .tabbar{ background:rgba(21,18,42,.96); }
.tb-dark .sheet-top{ background:rgba(21,18,42,.92); }
.tb-dark .bell.dot::after{ border-color:#15122a; }
.tb-dark .pcard .mg,.tb-dark .vbadge{ background:#12331f; }
.tb-dark .toast,.tb-dark .profhead .planbadge{ background:#2a2742; }
.tb-dark .offline-bar{ background:#3a2a10; color:#f5c97a; }
.tb-dark input[type=range]{ background:#33285c; }
.tb-dark .skel{ background:linear-gradient(90deg,#221f38 25%,#2b2745 37%,#221f38 63%); }
.tb-dark .gate .gate-tx{ color:#c9b6ff; }
.tb-dark .gate .gate-act button.ghost{ color:#c9b6ff; }
.tb-dark .refbanner .rb-t{ color:#d7c9ff; }
.tb-dark .refbanner .rb-s{ color:var(--ink2); }

/* Note du mur de connexion */
.auth-note{ font-size:12px; color:rgba(255,255,255,.82); text-align:center; margin:4px 0 0; max-width:300px; line-height:1.5; }

/* ===== Fournisseurs certifiés — annuaire ===== */
.sup-access{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--money-ink); background:#d6f2e5; border-radius:12px; padding:9px 12px; margin:0 0 12px; }
.sup-access i{ width:16px; height:16px; }
.sup-renew{ margin-left:auto; border:none; background:var(--brand); color:#fff; font-weight:700; font-size:11.5px; padding:6px 11px; border-radius:100px; cursor:pointer; }
.sup-renew:active{ transform:scale(.96); }
.sup .sup-h{ align-items:flex-start; gap:11px; }
.sup .sup-ava{ width:42px; height:42px; flex:0 0 42px; border-radius:12px; color:#fff; font-family:'Outfit'; font-weight:800; font-size:18px; display:grid; place-items:center; }
.sup .sup-id{ flex:1 1 auto; min-width:0; }
.sup .sup-h .vbadge{ margin-top:0; flex:0 0 auto; }
.sup .sup-go{ width:100%; margin-top:11px; border:1px solid var(--brand); background:var(--brand-50); color:var(--brand); font-weight:700; font-size:13px; padding:10px; border-radius:12px; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; }
.sup .sup-go:active{ transform:scale(.98); }
.sup .sup-go i{ width:16px; height:16px; }
.pw-life{ background:transparent; border:none; color:var(--ink2); font-size:12.5px; font-weight:600; text-decoration:underline; cursor:pointer; padding:6px; }
.tb-dark .sup-access{ background:#12331f; color:#7ee2ab; }
.tb-dark .sup .sup-go{ background:#241f3d; }

/* Bannière d'accueil Fournisseurs (dégradé pour ressortir) */
.supbanner{ display:flex; align-items:center; gap:12px; margin:14px 18px 0; background:var(--grad); color:#fff; border-radius:18px; padding:14px 16px; cursor:pointer; box-shadow:0 10px 24px rgba(96,36,240,.22); }
.supbanner .rb-ic{ width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.2); display:grid; place-items:center; flex-shrink:0; }
.supbanner .rb-ic i{ width:22px; height:22px; }
.supbanner .rb-tx{ flex:1; }
.supbanner .rb-t{ font-weight:700; font-size:14.5px; }
.supbanner .rb-s{ font-size:12px; opacity:.92; margin-top:2px; }
.supbanner > i{ width:20px; height:20px; opacity:.85; }
.supbanner:active{ transform:scale(.96); filter:brightness(.96); }

/* ===== Carte produit gagnant (façon Minea) ===== */
.pcard .pimg .ptrend{ position:absolute; top:8px; left:8px; z-index:1; display:inline-flex; align-items:center; gap:2px; font-size:10.5px; font-weight:800; color:#fff; background:rgba(13,11,31,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:3px 8px; border-radius:100px; }
.pcard .pimg .ptrend.warm{ background:rgba(232,120,20,.95); }
.pcard .pimg .ptrend.hot{ background:rgba(228,42,42,.96); }
.pcard .pimg .pflag{ position:absolute; top:8px; right:8px; z-index:1; width:24px; height:24px; border-radius:100px; background:rgba(255,255,255,.92); display:grid; place-items:center; font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.pcard .pb{ padding:11px 12px 13px; }
.pcard .pmeta{ display:flex; align-items:center; gap:9px; margin:0 0 9px; font-size:10.5px; }
.pcard .pstar{ display:inline-flex; align-items:center; gap:3px; color:var(--amber-ink); font-weight:700; }
.pcard .pstar i{ width:11px; height:11px; fill:currentColor; stroke:currentColor; }
.pcard .psold{ color:var(--ink3); font-weight:600; }
.pcard .pprice{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.pcard .pprice .mg{ margin-top:0; }
/* Méta dans la fiche produit */
.pdmeta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:-2px 0 14px; font-size:13px; }
.pdmeta .pstar{ display:inline-flex; align-items:center; gap:4px; color:var(--amber-ink); font-weight:800; }
.pdmeta .pstar i{ width:15px; height:15px; fill:currentColor; stroke:currentColor; }
.pdmeta .psold{ color:var(--ink2); font-weight:700; }
.pdmeta .pctry{ color:var(--ink2); font-weight:700; }
/* En-tête flux boutique */
.feedhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 18px 12px; }
.feedhead .fh-t{ font-family:'Outfit'; font-weight:800; font-size:16px; }
.feedhead .fh-s{ font-size:12px; color:var(--ink2); margin-top:2px; }
.feedhead .fh-live{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:var(--money-ink); background:#d6f2e5; padding:6px 11px; border-radius:100px; white-space:nowrap; }
.feedhead .fh-live .dot{ width:7px; height:7px; border-radius:50%; background:#1ea868; animation:fhpulse 1.8s infinite; }
@keyframes fhpulse{ 0%{ box-shadow:0 0 0 0 rgba(30,168,104,.5); } 70%{ box-shadow:0 0 0 6px rgba(30,168,104,0); } 100%{ box-shadow:0 0 0 0 rgba(30,168,104,0); } }
.tb-dark .feedhead .fh-live{ background:#12331f; color:#7ee2ab; }
.tb-dark .pcard .pimg .pflag{ background:rgba(40,36,66,.95); }

/* ===== Filtre & tri boutique ===== */
.fchips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.fchips::-webkit-scrollbar{ display:none; }
.fchip{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:100px; cursor:pointer; white-space:nowrap; transition:.12s; }
.fchip:active{ transform:scale(.95); }
.fchip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fchip-more{ color:var(--brand); border-style:dashed; border-color:var(--brand); background:transparent; }
#shop-filter-btn{ position:relative; }
#shop-filter-btn.on::after{ content:''; position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--brand); border:2px solid #fff; }
.filter-body{ padding:6px 0 12px; }
.filter-lab{ font-family:'Outfit'; font-weight:800; font-size:14px; padding:8px 18px 10px; }
.filter-cta{ display:flex; gap:10px; }
.filter-cta .btn-main{ flex:1; }
.tb-dark .fchip{ background:#1d1a33; border-color:#2c2746; color:var(--ink2); }
.tb-dark .fchip.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.tb-dark #shop-filter-btn.on::after{ border-color:#15122a; }

/* ===== VAGUE 3 — délice ===== */
/* Logo de marque (monogramme pont) */
.onb .logo svg{ width:50px; height:50px; color:#fff; }

/* Drapeaux : pastille code ISO (rendu fiable partout, même émulateur) */
.pcard .pimg .pflag{ width:auto; min-width:0; height:18px; padding:0 7px; border-radius:100px; font-size:10px; font-weight:800; letter-spacing:.5px; color:var(--ink); background:rgba(255,255,255,.93); display:inline-flex; align-items:center; }
.pdmeta .pctry{ font-weight:700; }

/* Code de parrainage copiable */
.ref-hero .ref-code{ display:inline-flex; align-items:center; gap:10px; border:1px dashed rgba(255,255,255,.55); background:rgba(255,255,255,.16); border-radius:14px; padding:8px 16px; margin:8px 0 4px; cursor:pointer; color:#fff; }
.ref-hero .ref-code i{ width:18px; height:18px; opacity:.9; }
.ref-hero .ref-code:active{ transform:scale(.97); }
.ref-hero .ref-hint{ font-size:11px; opacity:.85; margin-bottom:14px; }

/* Scrim derrière les sheets (profondeur) */
.scrim{ position:fixed; inset:0; background:rgba(13,11,31,.5); opacity:0; pointer-events:none; transition:opacity .25s; z-index:79; }
body.has-sheet .scrim{ opacity:1; pointer-events:auto; }

/* Confettis (célébration) */
.confetti-wrap{ position:fixed; inset:0; pointer-events:none; z-index:300; overflow:hidden; }
.confetti-bit{ position:absolute; top:-14px; width:9px; height:14px; border-radius:2px; opacity:.92; animation:confetti-fall linear forwards; }
@keyframes confetti-fall{ to{ transform:translate(var(--x), 106vh) rotate(var(--r)); opacity:.9; } }

/* Accessibilité clavier */
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:8px; }

/* ============================================================
   REDESIGN « ÉPURÉ » — palette resserrée, cartes neutres,
   mode sombre gris-charbon. (Surcharge en fin de fichier.)
   ============================================================ */
:root{
  --brand:#5B4AE0; --brand-2:#7A6CF0; --brand-50:#eeecfb; --brand-100:#e1ddf8; --brand-700:#4334b0;
  --grad:linear-gradient(135deg,#5B4AE0,#7A6CF0);
  --ink:#17172a; --ink2:#5c5c70; --ink3:#6f6f7d; --line:#ececf2; --soft:#f4f4f9;
  --money:#1f9d6b; --money-bg:#e8f6ef; --money-ink:#147a52;
}
body{ background:#eeeef4; }
.app{ background:#f7f7fb; }
.app{ box-shadow:0 0 0 1px rgba(23,23,42,.04), 0 14px 60px rgba(23,23,42,.08); }

/* Cartes produits neutres : la PHOTO fait la couleur, un seul accent */
.pcard{ border-color:var(--line); box-shadow:0 2px 10px rgba(23,23,42,.05); }
.pcard .pimg{ background:#ebebf2; }
.pcard .pimg i, .pcard .pimg svg{ color:#a7a7b6; stroke:#a7a7b6; opacity:1; }
.pcard .pimg .pflag{ background:#fff; color:var(--ink2); }
.pcard .pimg .ptrend, .pcard .pimg .ptrend.warm, .pcard .pimg .ptrend.hot{ background:rgba(23,23,42,.5); color:#fff; }
.pcard .pprice .mg{ background:transparent; padding:0; color:var(--money-ink); font-weight:700; }
.pdimg{ background:#ebebf2; }
.pdimg i, .pdimg svg{ color:#a7a7b6; stroke:#a7a7b6; opacity:1; }

/* Avatar fournisseur : un seul ton de marque (plus d'arc-en-ciel) */
.sup .sup-ava{ background:var(--brand-50); color:var(--brand); }

/* Bannière fournisseurs : carte sobre au lieu du gros dégradé */
.supbanner{ background:var(--brand-50); color:var(--brand-700); box-shadow:none; }
.supbanner .rb-ic{ background:var(--brand); color:#fff; }
.supbanner .rb-t{ color:var(--brand-700); }
.supbanner .rb-s{ color:var(--ink2); opacity:1; }
.supbanner > i{ color:var(--brand); }

/* ---- Mode sombre : gris-charbon neutre (fini le violet partout) ---- */
body.tb-dark{
  --ink:#ececf2; --ink2:#a4a4b2; --ink3:#7e7e8c; --line:#2a2a33; --soft:#1b1b22;
  --brand:#8b7dff; --brand-2:#9c90ff; --brand-50:#252336; --brand-100:#322e48; --brand-700:#cfc6ff;
  --grad:linear-gradient(135deg,#6a5cf0,#8b7dff);
  --money:#5fcda0; --money-bg:#14302a; --money-ink:#7ee2ab; --amber-bg:#3a2a10;
  background:#0e0e12;
}
.tb-dark .app{ background:#121217; }
.tb-dark .statusbar-pad{ background:#121217; }
.tb-dark .citem,.tb-dark .pcard,.tb-dark .pcard .pb,.tb-dark .trcard,.tb-dark .pack,.tb-dark .tier,.tb-dark .sup,.tb-dark .tx,.tb-dark .weightbox,.tb-dark .promo-item,.tb-dark .sheet,.tb-dark .mod,.tb-dark .checklist{ background:#1b1b22; }
.tb-dark .mod.done{ background:#121217; }
.tb-dark .qa .ic{ background:#1b1b22; }
.tb-dark .tabbar{ background:rgba(18,18,23,.96); }
.tb-dark .sheet-top{ background:rgba(18,18,23,.92); }
.tb-dark .bell.dot::after{ border-color:#121217; }
.tb-dark .pcard .pimg, .tb-dark .pdimg{ background:#23232b; }
.tb-dark .pcard .pimg i,.tb-dark .pcard .pimg svg,.tb-dark .pdimg i,.tb-dark .pdimg svg{ color:#70707f; stroke:#70707f; }
.tb-dark .pcard .pimg .pflag{ background:#2c2c36; color:#cfcfda; }
.tb-dark .pcard .mg{ background:transparent; color:var(--money-ink); }
.tb-dark .vbadge{ background:#14302a; }
.tb-dark .sup .sup-ava{ background:#252336; color:#b8acff; }
.tb-dark .supbanner{ background:#1b1b22; color:#cfc6ff; }
.tb-dark .toast,.tb-dark .profhead .planbadge{ background:#2a2a33; }
.tb-dark .skel{ background:linear-gradient(90deg,#1f1f27 25%,#26262f 37%,#1f1f27 63%); }
.tb-dark input[type=range]{ background:#322e48; }
.tb-dark .feedhead .fh-live, .tb-dark .sup-access{ background:#14302a; color:#7ee2ab; }
.tb-dark .sup .sup-go{ background:#252336; }

/* Titres de section discrets (étiquettes) */
.sectit{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:16px 18px 8px; }
.sectit a{ text-transform:none; letter-spacing:0; font-size:12px; }

/* Tuiles rapides (Crédits / Abonnement / Fournisseurs / Parrainage) — plus d'ombre */
.qa{ background:#fff; box-shadow:0 8px 20px rgba(23,23,42,.12); }
.qa:active{ box-shadow:0 3px 10px rgba(23,23,42,.10); }
.tb-dark .qa{ background:#22222c; border-color:#2e2e38; box-shadow:0 8px 22px rgba(0,0,0,.5); }

/* Fiche cours : miniature vidéo dans le cover (agrandie) */
.cover-lg{ overflow:hidden; height:240px; flex-shrink:0; }
.cover-lg .cover-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; background:#0c0c12; }
.cover-lg::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.42)); z-index:1; pointer-events:none; }
.cover-lg .flag{ z-index:2; }
.cover-lg .play{ z-index:2; width:74px; height:74px; }
.cover-lg .play i{ width:34px; height:34px; }
@media (max-width:380px){ .cover-lg{ height:210px; } }

/* ===== Page parrainage enrichie ===== */
.ref-gift{ width:56px; height:56px; border-radius:18px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); display:grid; place-items:center; margin:0 auto 12px; }
.ref-gift i{ width:28px; height:28px; color:#fff; }
.ref-stats{ margin-top:14px; }
.ref-prog{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:13px 14px; margin-top:12px; box-shadow:0 2px 10px rgba(23,23,42,.05); }
.ref-prog-top{ display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink2); margin-bottom:9px; }
.ref-prog-top span:first-child{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink); }
.ref-prog-top i{ width:15px; height:15px; color:var(--amber-ink); }
.ref-prog-top b{ color:var(--brand); }
.ref-prog-bar{ height:8px; border-radius:100px; background:var(--brand-50); overflow:hidden; }
.ref-prog-bar i{ display:block; height:100%; background:var(--brand); border-radius:100px; transition:width .4s; }
.ref-secT{ font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); margin:18px 0 9px; }
.ref-steps{ display:flex; flex-direction:column; gap:10px; }
.ref-step{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; box-shadow:0 2px 10px rgba(23,23,42,.04); }
.ref-step .rs-ic{ width:38px; height:38px; flex:0 0 38px; border-radius:11px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; }
.ref-step .rs-ic i{ width:18px; height:18px; }
.ref-step .rs-t{ font-size:13.5px; font-weight:600; }
.ref-step .rs-s{ font-size:12px; color:var(--ink2); margin-top:2px; }
.ref-rewards{ display:flex; flex-direction:column; gap:8px; }
.ref-reward{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:11px 13px; box-shadow:0 2px 10px rgba(23,23,42,.04); }
.ref-reward .rr-ic{ width:32px; height:32px; flex:0 0 32px; border-radius:9px; background:var(--money-bg); color:var(--money-ink); display:grid; place-items:center; }
.ref-reward .rr-ic i{ width:16px; height:16px; }
.ref-reward .rr-tx{ flex:1; font-size:13px; color:var(--ink); }
.ref-reward .rr-v{ font-family:'Outfit'; font-weight:800; font-size:15px; color:var(--brand); }
.ref-foot{ font-size:12px; color:var(--ink3); line-height:1.6; margin-top:16px; text-align:center; }
.tb-dark .ref-prog, .tb-dark .ref-step, .tb-dark .ref-reward{ background:#1b1b22; }
.tb-dark .ref-reward .rr-ic{ background:#14302a; color:#7ee2ab; }

/* Hero parrainage — relief + 2 boutons */
.ref-hero{ position:relative; overflow:hidden; padding:24px 18px; }
.ref-hero::after{ content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.10); top:-72px; right:-52px; }
.ref-hero::before{ content:''; position:absolute; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.07); bottom:-54px; left:-44px; }
.ref-hero > *{ position:relative; z-index:1; }
.ref-hero .ref-code{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.42); font-size:29px; padding:11px 22px; box-shadow:0 6px 18px rgba(0,0,0,.12); }
.ref-hero .ref-hint{ margin-bottom:16px; }
.ref-actions{ display:flex; gap:10px; }
.ref-btn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; border-radius:13px; padding:13px 10px; font-weight:700; font-size:13.5px; cursor:pointer; background:#fff; color:var(--brand-700); }
.ref-btn.ghost{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.5); }
.ref-btn:active{ transform:scale(.97); }
.ref-btn i{ width:17px; height:17px; }

/* ===== Leçon article (texte + images) ===== */
.article-reader h2{ font-size:21px; font-weight:800; margin-bottom:4px; line-height:1.3; }
.article-sub{ font-size:11.5px; color:var(--ink3); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin-bottom:16px; }
.art-h{ font-family:'Outfit'; font-size:16px; font-weight:800; margin:20px 0 9px; display:flex; align-items:center; gap:8px; }
.art-h i{ width:19px; height:19px; color:var(--brand); flex-shrink:0; }
.art-steps{ counter-reset:step; list-style:none; margin:0 0 14px; padding:0; }
.art-steps li{ position:relative; counter-increment:step; padding:0 0 12px 40px; min-height:28px; }
.art-steps li::before{ content:counter(step); position:absolute; left:0; top:0; width:27px; height:27px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; }
.art-steps li::after{ content:''; position:absolute; left:13px; top:27px; bottom:2px; width:2px; background:var(--brand-100); }
.art-steps li:last-child::after{ display:none; }
.art-steps li span{ font-size:14px; color:var(--ink2); line-height:1.55; display:block; padding-top:4px; }
/* Vidéo dans une leçon (chargement à la demande) */
.art-video-ph{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#1a1430 center/cover no-repeat; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; cursor:pointer; margin:8px 0 16px; }
.art-video-ph.hasposter::after{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.30); }
.avp-play{ position:relative; z-index:1; width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .15s; }
.art-video-ph:active .avp-play{ transform:scale(.92); }
.avp-play i{ width:27px; height:27px; color:var(--brand); margin-left:3px; }
.avp-title{ position:absolute; z-index:1; left:0; right:0; bottom:0; padding:14px 12px 10px; font-size:12.5px; font-weight:600; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.72)); }
.art-video,.art-videowrap{ width:100%; aspect-ratio:16/9; border-radius:14px; margin:8px 0 16px; display:block; background:#000; }
.art-videowrap{ position:relative; overflow:hidden; }
.art-videowrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.art-video{ object-fit:contain; }

/* Bouton de redirection dans une leçon */
.art-cta{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; margin:8px 0 16px; padding:13px 14px; border:none; border-radius:14px; cursor:pointer; font-family:'Outfit',inherit; font-size:14.5px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--brand),#7c5cff); box-shadow:0 6px 18px rgba(109,40,217,.28); }
.art-cta span{ flex:1; }
.art-cta i{ width:19px; height:19px; flex-shrink:0; }
.art-cta .art-cta-arr{ width:18px; height:18px; opacity:.9; }
.art-cta:active{ transform:scale(.99); }

.art-logos{ display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 18px; }
.art-logo{ display:flex; flex-direction:column; align-items:center; gap:6px; width:68px; position:relative; }
.art-logo.dl{ background:none; border:none; padding:0; cursor:pointer; font:inherit; }
.art-logo.dl:active{ transform:scale(.95); }
.art-logo .art-logo-dl{ position:absolute; top:-5px; right:4px; width:20px; height:20px; padding:4px; background:var(--brand); color:#fff; border-radius:50%; box-shadow:0 2px 7px rgba(0,0,0,.28); }
.art-logos-hint{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink3); margin:-10px 2px 16px; }
.art-logos-hint i{ width:14px; height:14px; }
.art-logo img{ width:54px; height:54px; border-radius:14px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:5px; box-shadow:0 2px 9px rgba(20,10,40,.07); }
.art-logo span{ font-size:11px; color:var(--ink2); text-align:center; font-weight:600; line-height:1.2; }
.art-note.warn{ background:#fff5ed; border-color:#ffd9b8; }
.art-note.warn i{ color:#e8820c; }
.art-note.warn span{ color:#6b4516; } /* fond crème fixe : texte foncé lisible en clair ET sombre */
.art-p{ font-size:14.5px; color:var(--ink2); line-height:1.7; margin:0 0 12px; }
.art-ul{ margin:0 0 14px; padding:0; list-style:none; }
.art-ul li{ position:relative; font-size:14px; color:var(--ink2); line-height:1.55; padding:0 0 9px 22px; }
.art-ul li::before{ content:''; position:absolute; left:5px; top:8px; width:6px; height:6px; border-radius:50%; background:var(--brand); }
.art-note{ display:flex; gap:10px; background:var(--brand-50); border:1px solid var(--brand-100); border-radius:14px; padding:12px 14px; margin:6px 0 16px; }
.art-note i{ width:18px; height:18px; color:var(--brand); flex-shrink:0; margin-top:1px; }
.art-note span{ font-size:13.5px; color:var(--ink); line-height:1.55; }
.art-fig{ margin:10px 0 18px; }
.art-fig img{ width:100%; border-radius:14px; border:1px solid var(--line); display:block; background:var(--soft); }
.art-fig figcaption{ font-size:12px; color:var(--ink3); margin-top:8px; text-align:center; line-height:1.4; }
.article-done{ width:100%; margin-top:18px; }
.article-doneflag{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; font-weight:700; color:var(--money-ink); background:var(--money-bg); border-radius:13px; padding:13px; margin-top:18px; }
.article-doneflag i{ width:18px; height:18px; }
.mod .mi.playm.art{ background:var(--brand-50); color:var(--brand); }

/* ===== Carte de solde (écran Abonnement) ===== */
.bal-card{ position:relative; overflow:hidden; background:var(--grad); color:#fff; border-radius:18px; padding:18px; margin-bottom:6px; box-shadow:0 10px 24px rgba(96,36,240,.22); }
.bal-card::after{ content:''; position:absolute; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.12); top:-60px; right:-44px; }
.bal-card > *{ position:relative; z-index:1; }
.bal-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.bal-l{ font-size:12.5px; opacity:.92; }
.bal-tier{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; background:rgba(255,255,255,.18); padding:4px 11px; border-radius:100px; }
.bal-tier i{ width:13px; height:13px; }
.bal-amount{ display:flex; align-items:center; gap:8px; margin-bottom:15px; }
.bal-amount i{ width:26px; height:26px; }
.bal-amount b{ font-family:'Outfit'; font-weight:800; font-size:36px; line-height:1; }
.bal-amount span{ font-size:13px; opacity:.92; align-self:flex-end; padding-bottom:4px; }
.bal-recharge{ width:100%; background:#fff; color:var(--brand-700); border:none; border-radius:13px; padding:13px; font-weight:700; font-size:14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; }
.bal-recharge:active{ transform:scale(.98); }
.bal-recharge i{ width:18px; height:18px; }

/* Bouton principal : style de base (était rempli seulement dans .bottom-cta) */
.btn-main{ background:var(--brand); color:#fff; border:none; border-radius:13px; padding:14px; font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-main i{ width:18px; height:18px; }
.btn-main.ghost{ background:var(--brand-50); color:var(--brand-700); }
.tb-dark .btn-main.ghost{ background:#252336; color:#cfc6ff; }
/* Cartes d'abonnement — un peu plus de relief */
.tier{ padding:16px 16px 18px; }
.tier .tier-perks{ margin:9px 0 15px; }
.tier.owned{ background:var(--brand-50); }

/* Achat de crédits à montant libre */
.wcustom{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:0 2px 10px rgba(23,23,42,.05); }
.wc-row{ display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:12px; padding:0 13px; background:var(--soft); }
.wc-row input{ flex:1; border:none; background:transparent; font-family:'Outfit'; font-weight:700; font-size:20px; color:var(--ink); padding:11px 0; outline:none; width:100%; }
.wc-unit{ font-size:13px; color:var(--ink2); font-weight:600; }
.wc-fcfa{ font-size:13px; color:var(--money-ink); margin:9px 0 12px; font-weight:700; }
.wcustom .btn-main{ width:100%; }
.tb-dark .wcustom{ background:#1b1b22; }

/* ===== Suivi / Chat ===== */
#v-chat{ padding-bottom:0; }
#v-chat.active{ display:flex; flex-direction:column; overflow:hidden; }
.chat-top{ flex-shrink:0; }
.chat-msgs{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 16px; display:flex; flex-direction:column; gap:9px; }
.chat-msg{ max-width:82%; display:flex; flex-direction:column; }
.chat-msg.me{ align-self:flex-end; align-items:flex-end; }
.chat-msg.them{ align-self:flex-start; align-items:flex-start; }
.chat-bubble{ padding:9px 13px; border-radius:16px; font-size:14px; line-height:1.45; word-break:break-word; }
.chat-msg.me .chat-bubble{ background:var(--brand); color:#fff; border-bottom-right-radius:5px; }
.chat-msg.them .chat-bubble{ background:#fff; color:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px; }
.chat-att{ margin-bottom:3px; max-width:240px; }
.chat-att img, .chat-att video{ width:100%; border-radius:14px; display:block; background:#000; }
.chat-att img{ cursor:pointer; }
.chat-time{ font-size:10px; color:var(--ink3); margin-top:3px; padding:0 4px; }
.chat-input{ flex-shrink:0; display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--soft); }
.chat-input input[type=text]{ flex:1; min-width:0; border:1px solid var(--line); border-radius:100px; padding:11px 16px; font-size:14px; background:#fff; color:var(--ink); outline:none; }
.chat-input input[type=text]:focus{ border-color:var(--brand); }
.chat-attach, .chat-send{ width:42px; height:42px; flex:0 0 42px; border-radius:50%; border:none; display:grid; place-items:center; cursor:pointer; }
.chat-attach{ background:var(--brand-50); color:var(--brand); }
.chat-send{ background:var(--brand); color:#fff; }
.chat-attach:active, .chat-send:active{ transform:scale(.94); }
.chat-attach i, .chat-send i{ width:19px; height:19px; }
.chat-empty{ margin:auto; text-align:center; max-width:260px; padding:30px 0; }
.chat-empty .ce-ic{ width:60px; height:60px; border-radius:20px; background:var(--brand-50); color:var(--brand); display:grid; place-items:center; margin:0 auto 14px; }
.chat-empty .ce-ic i{ width:28px; height:28px; }
.chat-empty .ce-t{ font-family:'Outfit'; font-weight:800; font-size:16px; margin-bottom:6px; }
.chat-empty .ce-s{ font-size:13px; color:var(--ink2); line-height:1.5; }
.tb-dark .chat-msg.them .chat-bubble{ background:#1b1b22; }
.tb-dark .chat-input input[type=text]{ background:#1b1b22; }
/* Assistant (bot) */
.bot-note{ display:flex; align-items:flex-start; gap:8px; background:var(--brand-50); color:var(--brand-700); border-radius:12px; padding:10px 12px; font-size:12.5px; line-height:1.45; margin-bottom:2px; }
.bot-note i{ width:16px; height:16px; flex-shrink:0; margin-top:1px; color:var(--brand); }
.bot-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bot-chip{ border:1px solid var(--line); background:#fff; color:var(--brand-700); border-radius:100px; padding:8px 13px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left; }
.bot-chip:active{ transform:scale(.96); }
.tb-dark .bot-chip{ background:#1b1b22; border-color:#2c2746; }
/* Carte transition vers le coach (achat formation) */
.bot-cta{ margin-top:8px; padding:14px; border-radius:16px; color:#fff; background:linear-gradient(135deg,var(--brand),#7c5cff); box-shadow:0 10px 24px rgba(108,70,255,.30); animation:ctaIn .45s cubic-bezier(.2,.8,.2,1); }
.bot-cta-h{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; }
.bot-cta-h i{ width:18px; height:18px; flex-shrink:0; }
.bot-cta-s{ font-size:12.5px; line-height:1.5; opacity:.93; margin-top:6px; }
.bot-cta-btn{ margin-top:12px; width:100%; display:flex; align-items:center; justify-content:center; gap:7px; background:#fff; color:var(--brand-700); border:none; border-radius:100px; padding:11px; font-weight:700; font-size:13.5px; cursor:pointer; }
.bot-cta-btn i{ width:16px; height:16px; }
.bot-cta-btn:active{ transform:scale(.97); }
@keyframes ctaIn{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
/* ===== Micro-animations ===== */
/* Transition d'entrée à chaque changement d'onglet */
.view.viewIn{ animation:viewIn .34s cubic-bezier(.2,.7,.2,1); }
@keyframes viewIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* Apparition en cascade des blocs/cartes */
.qa, .citem, .pcard, .tier, .promo-item{ animation:blockIn .42s both cubic-bezier(.2,.7,.2,1); }
@keyframes blockIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.qa:nth-child(2){ animation-delay:.05s } .qa:nth-child(3){ animation-delay:.1s } .qa:nth-child(4){ animation-delay:.15s }
.citem:nth-child(2),.pcard:nth-child(2){ animation-delay:.05s }
.citem:nth-child(3),.pcard:nth-child(3){ animation-delay:.1s }
.citem:nth-child(4),.pcard:nth-child(4){ animation-delay:.15s }
.citem:nth-child(n+5),.pcard:nth-child(n+5){ animation-delay:.2s }
/* Retour tactile au toucher */
.qa, .citem, .pcard, .tier, .refbanner, .promo, .creditchip, .langchip, .qmethod, .sup-card{ transition:transform .1s ease, box-shadow .1s ease; }
.qa:active, .citem:active, .pcard:active, .tier:active, .refbanner:active, .promo:active, .creditchip:active, .langchip:active, .qmethod:active, .sup-card:active{ transform:scale(.97); }
/* Bulle de saisie du bot (3 points) */
.chat-bubble.typing{ display:inline-flex; gap:4px; align-items:center; padding:13px 14px; }
.chat-bubble.typing span{ width:7px; height:7px; border-radius:50%; background:var(--muted,#9aa0ad); opacity:.5; animation:typingDot 1s infinite ease-in-out; }
.chat-bubble.typing span:nth-child(2){ animation-delay:.15s } .chat-bubble.typing span:nth-child(3){ animation-delay:.3s }
@keyframes typingDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4 } 30%{ transform:translateY(-4px); opacity:.9 } }
@media (prefers-reduced-motion:reduce){ .view.viewIn, .qa, .citem, .pcard, .tier, .promo-item, .bot-cta{ animation:none !important; } }
/* Badge non-lus + 6 onglets un peu plus serrés */
.tabbar .tab{ padding:6px 7px; }
.tab.dot{ position:relative; }
.tab.dot::after{ content:''; position:absolute; top:3px; right:9px; width:8px; height:8px; border-radius:50%; background:#e84a4a; border:2px solid rgba(255,255,255,.96); }
.tb-dark .tab.dot::after{ border-color:#121217; }

/* Actualisation : icône qui tourne + tirer pour rafraîchir */
@keyframes ptrspin{ to{ transform: rotate(360deg); } }
.bell svg.spin, .bell i.spin{ animation: ptrspin .8s linear infinite; }
.bell.spinning svg, .bell.spinning i{ animation: ptrspin .8s linear infinite; }
/* Pagination boutique */
.shop-pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:18px 18px 6px; }
.shop-pager:empty{ display:none; }
.pgbtn{ width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--brand); display:grid; place-items:center; cursor:pointer; }
.pgbtn i{ width:20px; height:20px; }
.pgbtn:disabled{ opacity:.35; cursor:default; color:var(--ink3); }
.pgbtn:not(:disabled):active{ transform:scale(.94); }
.pginfo{ font-weight:700; font-size:13.5px; color:var(--ink2); min-width:84px; text-align:center; }
.tb-dark .pgbtn{ background:#1b1b22; border-color:#2c2746; }
.ptr{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:38px; height:38px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(23,23,42,.2); display:grid; place-items:center; color:var(--brand); z-index:70; opacity:0; pointer-events:none; transition:top .2s ease, opacity .2s ease; }
.ptr svg, .ptr i{ width:20px; height:20px; }
.ptr.ready{ background:var(--brand); color:#fff; }
.ptr.spin svg, .ptr.spin i{ animation: ptrspin .8s linear infinite; }
.tb-dark .ptr{ background:#22222c; }

/* Cloche de notifications animée (quand il y a des notifs non lues) */
@keyframes bellRing{
  0%, 55%, 100%{ transform: rotate(0deg); }
  6%{ transform: rotate(17deg); }
  13%{ transform: rotate(-14deg); }
  20%{ transform: rotate(10deg); }
  27%{ transform: rotate(-6deg); }
  34%{ transform: rotate(0deg); }
}
@keyframes bellPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(228,74,74,.55); }
  70%{ box-shadow: 0 0 0 7px rgba(228,74,74,0); }
}
#home-bell.dot svg, #home-bell.dot i{ transform-origin: 50% 12%; animation: bellRing 2.8s ease-in-out infinite; }
#home-bell.dot::after{ background:#e84a4a; width:9px; height:9px; animation: bellPulse 1.6s ease-in-out infinite; }
.tb-dark #home-bell.dot::after{ border-color:#15122a; }

/* Panneau de notifications : tiroir qui descend du haut */
#sheet-notifs{ inset:0 0 auto 0; height:auto; max-height:82vh; transform:translateY(-105%); border-radius:0 0 24px 24px; box-shadow:0 18px 46px rgba(13,11,31,.28); }
#sheet-notifs.open{ transform:translateY(0); }
#sheet-notifs .sheet-top{ border-radius:0; }

/* ===== Envoi : choix Avion / Bateau ===== */
.shipmode{ display:flex; gap:10px; margin:0 18px 12px; }
.smbtn{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-weight:700; font-size:13.5px; padding:12px 8px; border-radius:14px; cursor:pointer; }
.smbtn small{ font-weight:500; color:var(--ink3); font-size:11px; }
.smbtn i{ width:18px; height:18px; }
.smbtn.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.smbtn.active small{ color:rgba(255,255,255,.82); }
.smbtn:active{ transform:scale(.98); }
.wscale{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink3); margin-top:8px; }
.tb-dark .smbtn{ background:#1b1b22; border-color:#2a2a33; }

/* ===== Carte de cours enrichie ===== */
.citem{ align-items:flex-start; }
.citem .ci-main{ flex:1; min-width:0; }
.citem .chev{ align-self:center; }
.citem .ci-auth{ font-size:11.5px; color:var(--ink2); margin-top:4px; display:flex; align-items:center; gap:5px; }
.citem .ci-auth i{ width:13px; height:13px; color:var(--brand); }
.citem .ci-desc{ font-size:12.5px; color:var(--ink2); line-height:1.45; margin-top:5px; }
.citem .cs{ margin-top:8px; }
.citem .cs .ci-price{ color:var(--brand); font-weight:600; }
.citem .cs .ci-on{ color:var(--money-ink); font-weight:600; }