:root{--brand:#0f5132;--b2:#2eb087;--bbg:#f0fdf4;--b100:#dcfce7;--amber:#f59e0b;--abg:#fef3c7;--ink:#0b1220;--muted:#374151;--soft:#6b7280;--line:#e5e7eb;--bg:#f4f6f8;--sur:#ffffff;--sh:0 2px 8px rgba(11,18,32,.07);--sh2:0 6px 24px rgba(11,18,32,.1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* TOPBAR */
#top{position:fixed;top:0;left:0;right:0;height:52px;background:var(--sur);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:1rem;padding:0 1.5rem;z-index:200;box-shadow:var(--sh)}
.tlogo{font:800 1.2rem/1 "Lora",serif;color:var(--brand)}.tlogo span{color:var(--b2)}
.tsub{font:500 .58rem/1 "DM Sans",sans-serif;color:var(--soft);letter-spacing:.08em;text-transform:uppercase}
.tright{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.tico{width:36px;height:36px;border-radius:50%;border:none;background:none;display:flex;align-items:center;justify-content:center;color:var(--soft);transition:all .15s;position:relative}
.tico:hover{background:var(--bg);color:var(--brand)}
.tico svg{width:20px;height:20px}
.ndot{position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:1.5px solid #fff}
.tav{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--b2),#5de8b0);display:flex;align-items:center;justify-content:center;font:700 .7rem/1 "DM Sans",sans-serif;color:var(--brand);border:2px solid var(--b100)}

/* LAYOUT */
.page{max-width:1180px;margin:0 auto;padding:64px 1rem 3rem;display:grid;grid-template-columns:240px 1fr 280px;gap:1.25rem;align-items:start}

/* COL GAUCHE */
.cgl{position:sticky;top:64px;display:flex;flex-direction:column;gap:.35rem}
.lprofile{background:var(--sur);border-radius:16px;border:1px solid var(--line);overflow:hidden;margin-bottom:.5rem;box-shadow:var(--sh)}
.lbanner{height:50px;background:linear-gradient(135deg,var(--brand),var(--b2));position:relative;z-index:0}
.lbody{padding:0 1rem 1rem}
.lavwrap{margin-top:-20px;margin-bottom:.55rem;position:relative;z-index:1}
.lav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--b2),#5de8b0);display:flex;align-items:center;justify-content:center;font:700 .88rem/1 "DM Sans",sans-serif;color:var(--brand);border:3px solid #fff}
.lname{font:700 .86rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.ldiv{height:1px;background:var(--line);margin:.65rem -1rem}
.lstats{display:grid;grid-template-columns:1fr 1fr;gap:.35rem .5rem;padding-top:.45rem}
.lstat{display:flex;justify-content:space-between}
.lsl{font-size:.68rem;color:var(--soft)}
.lsn{font:700 .8rem/1 "DM Sans",sans-serif;color:var(--brand)}
.lcrecos{margin-top:.7rem;background:var(--abg);border-radius:10px;padding:.45rem .7rem;display:flex;align-items:center;justify-content:space-between}
.lcrn{font:800 .95rem/1 "Lora",sans-serif;color:#92400e}
.lcrl{font-size:.65rem;color:#b45309}
.nsec{font:600 .62rem/1 "DM Sans",sans-serif;color:var(--soft);text-transform:uppercase;letter-spacing:.06em;padding:.45rem .5rem .2rem}
.ni{display:flex;align-items:center;gap:.65rem;padding:.55rem .7rem;border-radius:10px;font:500 .84rem/1 "DM Sans",sans-serif;color:var(--muted);transition:all .15s;border:none;background:none;text-decoration:none;width:100%}
.ni:hover{background:var(--bbg);color:var(--brand)}
.ni.on{background:var(--bbg);color:var(--brand);font-weight:700}
.ni svg{width:17px;height:17px;flex-shrink:0;opacity:.7}
.ni.on svg{opacity:1}
.nbadge{margin-left:auto;background:#ef4444;color:#fff;font:700 .58rem/1 "DM Sans",sans-serif;padding:.13rem .42rem;border-radius:20px}

/* COL CENTRE */
.cctr{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

/* Hero solde */
.solde-hero{background:linear-gradient(135deg,var(--brand),#0a3d24);border-radius:20px;padding:2rem 2rem 1.75rem;position:relative;overflow:hidden}
.solde-hero::before{content:"";position:absolute;top:-40%;right:-10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(46,176,135,.18) 0%,transparent 70%);pointer-events:none}
.sh-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem}
.sh-label{font:500 .7rem/1 "DM Sans",sans-serif;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.4rem}
.sh-n{font:800 3.2rem/1 "Lora",serif;color:#fff}
.sh-unit{font-size:1rem;color:rgba(255,255,255,.6);margin-left:.3rem;font-family:"DM Sans",sans-serif;font-weight:400}
.sh-ico{font-size:2.5rem;opacity:.8}
.sh-hist{display:flex;gap:.75rem}
.sh-hitem{text-align:center}
.sh-hitem-n{font:700 1rem/1 "Lora",serif;color:rgba(255,255,255,.9)}
.sh-hitem-l{font-size:.6rem;color:rgba(255,255,255,.45);margin-top:.18rem}
.sh-actions{display:flex;gap:.65rem;flex-wrap:wrap}
.sh-btn{padding:.55rem 1.2rem;border-radius:10px;font:600 .78rem/1 "DM Sans",sans-serif;border:none;transition:all .15s}
.sh-btn-w{background:#fff;color:var(--brand)}
.sh-btn-w:hover{background:var(--b100)}
.sh-btn-g{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)}
.sh-btn-g:hover{background:rgba(255,255,255,.2)}

/* Onglets */
.ctabs{background:var(--sur);border-radius:14px;border:1px solid var(--line);padding:.45rem;display:flex;gap:.3rem;box-shadow:var(--sh)}
.ctab{flex:1;padding:.48rem .65rem;border-radius:10px;border:none;font:600 .78rem/1 "DM Sans",sans-serif;transition:all .15s;background:none;color:var(--soft);display:flex;align-items:center;justify-content:center;gap:.35rem}
.ctab.on{background:var(--brand);color:#fff}
.ctab:hover:not(.on){background:var(--bbg);color:var(--brand)}

/* Sections onglets */
.tab-section{display:none}
.tab-section.on{display:flex;flex-direction:column;gap:1rem}

/* ── ONGLET CONTRIBUER ── */
.contrib-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.contrib-card{background:var(--sur);border-radius:16px;border:1.5px solid var(--line);padding:1.1rem 1.1rem 1rem;transition:all .2s;cursor:pointer}
.contrib-card:hover{border-color:var(--b2);transform:translateY(-2px);box-shadow:var(--sh2)}
.cc-ico{font-size:1.6rem;margin-bottom:.65rem}
.cc-title{font:700 .88rem/1.3 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.28rem}
.cc-desc{font-size:.74rem;color:var(--soft);line-height:1.6;margin-bottom:.75rem}
.cc-badge{display:inline-flex;align-items:center;gap:.3rem;background:var(--abg);color:#92400e;font:700 .72rem/1 "DM Sans",sans-serif;padding:.25rem .6rem;border-radius:20px}
.cc-btn{width:100%;margin-top:.65rem;padding:.45rem;border-radius:9px;border:none;font:600 .74rem/1 "DM Sans",sans-serif;transition:all .15s;background:var(--brand);color:#fff}
.cc-btn:hover{background:#0a3d24}

/* ── ONGLET ACHETER ── */
.pack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.pack{background:var(--sur);border-radius:16px;border:1.5px solid var(--line);padding:1.25rem 1rem;text-align:center;transition:all .2s;cursor:pointer;position:relative}
.pack:hover{border-color:var(--b2);transform:translateY(-3px);box-shadow:var(--sh2)}
.pack.popular{border-color:var(--brand);box-shadow:0 0 0 3px var(--bbg)}
.pack-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font:700 .62rem/1 "DM Sans",sans-serif;padding:.2rem .65rem;border-radius:20px;white-space:nowrap}
.pack-ico{font-size:2rem;margin-bottom:.65rem}
.pack-n{font:800 1.8rem/1 "Lora",serif;color:var(--brand);margin-bottom:.2rem}
.pack-unit{font-size:.72rem;color:var(--soft);margin-bottom:.75rem}
.pack-price{font:800 1.3rem/1 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.25rem}
.pack-per{font-size:.65rem;color:var(--soft);margin-bottom:.85rem}
.pack-btn{width:100%;padding:.48rem;border-radius:9px;border:none;font:600 .76rem/1 "DM Sans",sans-serif;transition:all .15s;background:var(--brand);color:#fff}
.pack-btn:hover{background:#0a3d24}
.pack-note{font-size:.72rem;color:var(--soft);text-align:center;line-height:1.6}
.stripe-logo{display:inline-flex;align-items:center;gap:.3rem;font:600 .68rem/1 "DM Sans",sans-serif;color:var(--soft);margin-top:.35rem}

/* ── ONGLET PUBS ── */
.pub-intro{background:var(--sur);border-radius:14px;border:1px solid var(--line);padding:1rem 1.1rem;display:flex;gap:.85rem;align-items:center}
.pub-intro-ico{font-size:2rem;flex-shrink:0}
.pub-intro-txt{font-size:.8rem;color:var(--muted);line-height:1.65}
.pub-intro-txt strong{color:var(--ink)}
.pub-intro-badge{background:var(--abg);color:#92400e;font:700 .72rem/1 "DM Sans",sans-serif;padding:.22rem .55rem;border-radius:20px;white-space:nowrap;flex-shrink:0;align-self:flex-start}

.pub-list{display:flex;flex-direction:column;gap:.85rem}
.pub-card{background:var(--sur);border-radius:16px;border:1px solid var(--line);overflow:hidden;box-shadow:var(--sh);transition:box-shadow .2s}
.pub-card:hover{box-shadow:var(--sh2)}
.pub-thumb{position:relative;background:#0a0a0a;border-radius:0;aspect-ratio:16/7;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.pub-thumb-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a2e1a,#166534);opacity:.85}
.pub-thumb-ico{font-size:3.5rem;position:relative;z-index:1}
.pub-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.pub-play-btn{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;border:none;transition:all .2s;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.pub-play-btn:hover{background:#fff;transform:scale(1.08)}
.pub-play-btn svg{width:20px;height:20px;margin-left:3px;color:var(--brand)}
.pub-local-badge{position:absolute;top:.65rem;left:.65rem;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);color:#fff;font:600 .62rem/1 "DM Sans",sans-serif;padding:.2rem .55rem;border-radius:20px;border:1px solid rgba(255,255,255,.2);z-index:3}
.pub-reward{position:absolute;top:.65rem;right:.65rem;background:var(--abg);color:#92400e;font:700 .68rem/1 "DM Sans",sans-serif;padding:.22rem .55rem;border-radius:20px;z-index:3;display:flex;align-items:center;gap:.25rem}
.pub-info{padding:.9rem 1.1rem}
.pub-biz{display:flex;gap:.65rem;align-items:center;margin-bottom:.6rem}
.pub-biz-av{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.pub-biz-name{font:700 .84rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.pub-biz-meta{font-size:.68rem;color:var(--soft);margin-top:.1rem}
.pub-biz-dist{margin-left:auto;background:var(--bbg);color:var(--brand);font:600 .65rem/1 "DM Sans",sans-serif;padding:.18rem .48rem;border-radius:20px;flex-shrink:0;white-space:nowrap}
.pub-desc{font-size:.78rem;color:var(--muted);line-height:1.65;margin-bottom:.75rem}
.pub-watch-btn{width:100%;padding:.52rem;border-radius:10px;border:none;background:var(--brand);color:#fff;font:600 .78rem/1 "DM Sans",sans-serif;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:all .15s}
.pub-watch-btn:hover{background:#0a3d24}
.pub-watch-btn.watched{background:var(--bbg);color:var(--brand)}

/* Lecteur vidéo modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.on{display:flex}
.modal{background:var(--sur);border-radius:20px;width:100%;max-width:560px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.3)}
.modal-vid{background:#000;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.modal-vid-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a2e1a,#166534)}
.modal-vid-ico{font-size:5rem;position:relative;z-index:1;opacity:.6}
.modal-progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(255,255,255,.2)}
.modal-progress-fill{height:100%;background:var(--b2);width:0%;transition:width .5s linear}
.modal-timer{position:absolute;bottom:.75rem;right:.85rem;background:rgba(0,0,0,.5);color:#fff;font:700 .72rem/1 "DM Sans",sans-serif;padding:.22rem .6rem;border-radius:20px;z-index:2}
.modal-body{padding:1.25rem 1.25rem 1.5rem}
.modal-biz{display:flex;gap:.75rem;align-items:center;margin-bottom:.75rem}
.modal-biz-av{width:40px;height:40px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.modal-biz-name{font:700 .9rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.modal-biz-meta{font-size:.7rem;color:var(--soft);margin-top:.1rem}
.modal-reward{margin-left:auto;background:var(--abg);color:#92400e;font:700 .8rem/1 "DM Sans",sans-serif;padding:.3rem .7rem;border-radius:20px;flex-shrink:0}
.modal-desc{font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:1rem}
.modal-actions{display:flex;gap:.65rem}
.modal-btn{flex:1;padding:.55rem;border-radius:10px;border:none;font:600 .78rem/1 "DM Sans",sans-serif;transition:all .15s}
.modal-btn-main{background:var(--brand);color:#fff}
.modal-btn-main:hover{background:#0a3d24}
.modal-btn-sec{background:var(--bg);color:var(--muted);border:1.5px solid var(--line)}
.modal-btn-sec:hover{border-color:var(--line);background:var(--line)}

/* Succès Crécos */
.success-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:600;display:none;align-items:center;justify-content:center}
.success-overlay.on{display:flex}
.success-card{background:var(--sur);border-radius:24px;padding:2.5rem 2rem;text-align:center;max-width:340px;width:100%;box-shadow:0 32px 80px rgba(0,0,0,.25);animation:popIn .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
.sc-ico{font-size:3.5rem;margin-bottom:.75rem}
.sc-title{font:800 1.4rem/1.2 "Lora",serif;color:var(--ink);margin-bottom:.5rem}
.sc-n{font:800 2.5rem/1 "Lora",serif;color:var(--brand);margin:.75rem 0 .25rem}
.sc-l{font-size:.78rem;color:var(--soft);margin-bottom:1.5rem}
.sc-fil{background:var(--bbg);border-radius:14px;padding:.9rem 1rem;margin-bottom:1.25rem;text-align:left}
.sc-fil-q{font:600 .82rem/1.3 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.5rem}
.sc-fil-btns{display:flex;gap:.5rem}
.sc-fil-btn{flex:1;padding:.45rem;border-radius:9px;border:none;font:600 .74rem/1 "DM Sans",sans-serif;transition:all .15s}
.sc-fil-yes{background:var(--brand);color:#fff}
.sc-fil-yes:hover{background:#0a3d24}
.sc-fil-no{background:var(--bg);color:var(--soft);border:1.5px solid var(--line)}
.sc-close{font:500 .76rem/1 "DM Sans",sans-serif;color:var(--soft);background:none;border:none;text-decoration:underline}

/* Historique */
.hist-list{display:flex;flex-direction:column;gap:.6rem}
.hist-item{background:var(--sur);border-radius:12px;border:1px solid var(--line);padding:.75rem 1rem;display:flex;gap:.75rem;align-items:center}
.hist-ico{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.hist-name{font:600 .78rem/1.2 "DM Sans",sans-serif;color:var(--ink)}
.hist-meta{font-size:.65rem;color:var(--soft);margin-top:.1rem}
.hist-amount{margin-left:auto;font:700 .78rem/1 "DM Sans",sans-serif;color:#16a34a;white-space:nowrap}
.hist-fil{font:500 .62rem/1 "DM Sans",sans-serif;color:var(--b2);background:var(--bbg);padding:.12rem .4rem;border-radius:20px;margin-top:.2rem;display:inline-block}

/* COL DROITE */
.cgd{position:sticky;top:64px;display:flex;flex-direction:column;gap:1rem}
.rc{background:var(--sur);border-radius:16px;border:1px solid var(--line);padding:.95rem 1.1rem;box-shadow:var(--sh)}
.rtit{font:700 .8rem/1 "DM Sans",sans-serif;color:var(--ink);margin-bottom:.8rem}
.tip-item{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.7rem}
.tip-item:last-child{margin-bottom:0}
.tip-ico{font-size:1.1rem;flex-shrink:0;margin-top:.05rem}
.tip-txt{font-size:.74rem;color:var(--muted);line-height:1.6}
.tip-txt strong{color:var(--ink);display:block;margin-bottom:.15rem}

/* Toast */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;padding:.52rem 1.1rem;border-radius:10px;font:500 .76rem/1 "DM Sans",sans-serif;opacity:0;transition:all .25s;pointer-events:none;z-index:9999;white-space:nowrap;box-shadow:var(--sh2)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Bottom nav */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;height:54px;background:var(--sur);border-top:1px solid var(--line);align-items:center;justify-content:space-around;z-index:150}
.bn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.18rem;color:var(--soft);font:500 .52rem/1 "DM Sans",sans-serif;border:none;background:none;padding:.35rem;text-decoration:none;transition:color .15s}
.bn.on,.bn:hover{color:var(--brand)}
.bn svg{width:19px;height:19px}

@media(max-width:1040px){.page{grid-template-columns:200px 1fr}.cgd{display:none}.pack-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.page{grid-template-columns:1fr;padding-bottom:4.5rem}.cgl{display:none}.bnav{display:flex}.contrib-grid{grid-template-columns:1fr}.pack-grid{grid-template-columns:1fr}}

/* ── Bnav profil ── */
.bnav-profil{display:none;position:fixed;bottom:0;left:0;right:0;height:58px;
  background:var(--sur);border-top:1px solid var(--line);
  align-items:center;justify-content:space-around;z-index:150;
  padding-bottom:env(safe-area-inset-bottom,0)}
@media(max-width:720px){.bnav-profil{display:flex!important}}
.bn{display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-size:.62rem;font-weight:600;color:var(--soft);text-decoration:none;
  flex:1;padding:.4rem .25rem;border:none;background:none;cursor:pointer;font-family:inherit;transition:color .15s}
.bn.on,.bn:hover{color:var(--brand)}
.bn svg{width:20px;height:20px}
.bn-plus{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:.2rem;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--soft)}
.bn-plus-ico{width:46px;height:46px;border-radius:50%;background:var(--brand);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(15,81,50,.35);color:#fff;margin-top:-18px}
.plus-menu{position:fixed;inset:0;z-index:400;pointer-events:none}
.plus-menu.open{pointer-events:all}
.plus-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.plus-sheet{position:absolute;bottom:0;left:0;right:0;background:var(--sur);
  border-radius:24px 24px 0 0;padding:1.25rem 1rem 2rem;
  transform:translateY(100%);transition:transform .3s ease}
.plus-menu.open .plus-sheet{transform:translateY(0)}
.plus-title{font:700 1rem/1 'Lora',serif;color:var(--ink);margin-bottom:1rem;text-align:center}
.plus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem}
.plus-item{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  padding:.85rem .5rem;border-radius:16px;border:1.5px solid var(--line);
  background:var(--bg);font:600 .72rem/1 sans-serif;color:var(--ink);cursor:pointer}
.plus-item:hover{border-color:var(--b2);background:var(--bbg)}
.plus-ico{font-size:1.4rem}
.plus-close{width:100%;padding:.65rem;border-radius:20px;border:none;
  background:var(--line);font:600 .82rem/1 sans-serif;color:var(--muted);cursor:pointer}