/* Caisse Commune — registre de caisse : vert profond, ocre pour l'argent, chiffres alignés */
:root{
  --bg:#F2F4F0; --surface:#FFFFFF; --sunk:#F7F8F5; --ink:#17251F; --muted:#5C6B63; --line:#DCE2DA;
  --brand:#0E6A4E; --brand-ink:#FFFFFF; --brand-soft:#E3F1EA; --gold:#A8730F; --gold-soft:#FBF1DC;
  --danger:#B3261E; --danger-soft:#FBE7E5; --ok:#1C7A43; --ok-soft:#E2F4E8;
  --display:'Familjen Grotesk',system-ui,sans-serif; --body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:12px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0F1613; --surface:#17211C; --sunk:#131C18; --ink:#E5EDE8; --muted:#97A89E; --line:#28362F;
  --brand:#3FB98A; --brand-ink:#06140E; --brand-soft:#173329; --gold:#E0AE4A; --gold-soft:#2E2512;
  --danger:#F08A82; --danger-soft:#3A1A18; --ok:#5ED18E; --ok-soft:#14301F; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
h1{font-size:clamp(24px,4vw,30px);font-weight:700}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:700}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:13px}
/* ---- Structure de l'application ---- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:var(--ink);color:#DDE8E2;padding:18px 12px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;gap:4px}
@media (prefers-color-scheme:dark){.side{background:#0A100D}}
.logo{display:flex;gap:10px;align-items:center;font:700 17px var(--display);color:#fff;text-decoration:none;padding:4px 10px 14px}
.logo i{width:30px;height:30px;border-radius:8px;background:#3FB98A;display:grid;place-items:center;font-style:normal;color:#06140E;font-size:15px}
.asso-name{font-size:12px;color:#9DB3A7;padding:0 10px 12px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.side a.nav{display:flex;gap:10px;align-items:center;color:#DDE8E2;text-decoration:none;padding:9px 10px;border-radius:9px;font-weight:500}
.side a.nav:hover{background:rgba(255,255,255,.06)}
.side a.nav.on{background:rgba(63,185,138,.18);color:#fff}
.side a.nav svg{width:18px;height:18px;flex:none;opacity:.85}
.side .sep{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:10px;display:grid;gap:4px}
.side form button{all:unset;cursor:pointer;color:#9DB3A7;padding:9px 10px;border-radius:9px;font-size:14px}
.main{min-width:0;padding-block:22px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1080px;margin:0 auto;display:grid;gap:18px}
.mtop{display:none}
.bnav{display:none}
@media (max-width:860px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .mtop{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:20;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .mtop .logo{padding:0;font-size:16px;white-space:nowrap}
  .mtop .an{font-size:12px;color:#9DB3A7;max-width:50%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .main{padding-bottom:96px}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
  .bnav a{display:grid;justify-items:center;gap:2px;font-size:11px;color:var(--muted);text-decoration:none;padding:4px 0;font-weight:600}
  .bnav a svg{width:22px;height:22px}
  .bnav a.on{color:var(--brand)}
  .bnav a.plus span.b{width:42px;height:42px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;margin-top:-18px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
}
/* ---- En-têtes de page ---- */
.ph{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.ph .sub{color:var(--muted);margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:8px}
/* ---- Boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:9px 14px;font:600 14px var(--body);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.danger{color:var(--danger);border-color:var(--danger-soft)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.btn.block{width:100%}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* ---- Cartes et chiffres ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px;min-width:0}
.card>.hd{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
@media (max-width:520px){.kpis{grid-template-columns:1fr 1fr}.kpis .kpi.cash{grid-column:1/-1}.kpi .v{font-size:20px}}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:2px}
.kpi .l{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kpi .v{font:700 24px var(--display);font-variant-numeric:tabular-nums}
.kpi .d{font-size:13px;color:var(--muted);white-space:normal}
.kpi .d.num{white-space:normal}
.card>*{min-width:0}
.kpi.cash{background:var(--ink);border-color:var(--ink);color:#fff}
.kpi.cash .l,.kpi.cash .d{color:#A9BDB2}
@media (prefers-color-scheme:dark){.kpi.cash{background:var(--brand-soft);border-color:var(--brand-soft)}}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:18px;align-items:start}
/* Deux colonnes indépendantes : les cartes s'empilent sans trou */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;align-items:start}
.col{display:grid;gap:18px;min-width:0}
/* ---- Abonnement ---- */
.tarifs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tarif{display:grid;gap:2px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--sunk)}
.tarif b{font:700 20px var(--display)}
.tarif.best{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.plans{display:grid;gap:8px}
.plans .tarif{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plans .pt{display:grid;gap:2px}
.plans .tarif .small b{font-size:14px;font-family:inherit;font-weight:700}
.plans .tarif b.num{font-size:17px;white-space:nowrap}
.tarif.pick{text-decoration:none;color:var(--ink);background:var(--surface)}
.tarif.pick:hover{border-color:var(--brand)}
.tarif.pick.on{border:2px solid var(--brand);background:var(--brand-soft);padding:9px 11px}
.tarif.pick.on b{color:var(--brand)}
.tarif.pick.off{opacity:.55}
.pick-t{margin:0;font-size:14px}
.abo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px;align-items:start}
.abo-choice{display:grid;gap:10px}
.abo-pay .pay{border-top:0;padding-top:0}
.sec{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 -6px;scroll-margin-top:16px}
#abonnement{scroll-margin-top:16px}
.set-nav{display:flex;gap:6px;flex-wrap:wrap}
.set-nav a{font-size:13px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--surface)}
.set-nav a:hover{border-color:var(--brand)}
.pay{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.btn.wave{background:#1DC8FF;border-color:#1DC8FF;color:#0B1A33;font-weight:700}
.wave-pay{display:flex;gap:14px;align-items:center}
.wave-qr{flex:0 0 140px;background:#fff;border-radius:10px;padding:6px;border:3px solid #1DC8FF}
.wave-qr svg{display:block;width:100%;height:auto}
.wave-pay .mob{display:none}
@media (max-width:860px){.wave-qr{display:none}.wave-pay .desk{display:none}.wave-pay .mob{display:inline}}
code{font-size:12px;background:var(--sunk);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
details.add{display:grid;gap:12px}
details.add>summary{list-style:none;width:max-content}
details.add>summary::-webkit-details-marker{display:none}
details.add[open]>summary{display:none}
/* ---- Double vérification ---- */
.code-input{font:600 22px var(--display)!important;letter-spacing:.18em;text-align:center}
.setup2fa{max-width:640px;grid-column:1/-1}
.s2-step{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;border-top:1px solid var(--line);padding-top:14px}
.s2-step p{margin:0}
.s2-body{display:grid;gap:10px;justify-items:start;min-width:0}
.s2-body .f{width:100%}
.s2-n{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font:700 15px var(--display)}
.qr{width:220px;max-width:100%;background:#fff;border-radius:12px;padding:10px;border:1px solid var(--line)}
.qr svg{display:block;width:100%;height:auto}
.secret{margin:0;font:600 15px ui-monospace,Consolas,monospace;letter-spacing:.06em;background:var(--sunk);border:1px dashed var(--line);border-radius:8px;padding:8px 12px;word-break:break-all;white-space:normal}
.rcodes{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;background:var(--sunk);border:1px dashed var(--line);border-radius:10px}
.rcodes li{font:600 16px ui-monospace,Consolas,monospace;letter-spacing:.05em}
@media print{.rcodes{border:1px solid #000}}
/* ---- Tableaux ---- */
.tw{overflow-x:auto;margin:0 -16px;padding:0 16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
tr.x td{opacity:.5;text-decoration:line-through}
tfoot td{font-weight:700;border-top:2px solid var(--line)}
.list{display:grid}
.li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center;text-decoration:none;color:inherit}
.li:last-child{border-bottom:0}
.li .t{min-width:0;flex:1}
.li .t b{display:block;overflow:hidden;text-overflow:ellipsis}
.li .t span{font-size:13px;color:var(--muted)}
/* ---- Pastilles ---- */
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.pill.late{background:var(--danger-soft);color:var(--danger)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.off{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.pill.gold{background:var(--gold-soft);color:var(--gold)}
.owed{color:var(--danger);font-weight:700}
.money{color:var(--gold);font-weight:700}
/* ---- Formulaires ---- */
form.f{display:grid;gap:12px}
.chosen{border-radius:10px;padding:10px 12px;background:var(--sunk);border:1px dashed var(--line);color:var(--muted);font-size:14px}
.chosen.ok{background:var(--brand-soft);border:1px solid var(--brand);color:var(--ink)}
.chosen.ok b{color:var(--brand)}
.combo{position:relative}
.combo-list{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;max-height:300px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.14);z-index:20}
.combo-list li{display:grid;gap:1px;padding:8px 10px;border-radius:8px;cursor:pointer}
.combo-list li span{font-size:13px;color:var(--muted)}
.combo-list li.on,.combo-list li:hover{background:var(--brand-soft)}
.combo-list li.on b{color:var(--brand)}
.combo-list li.none{color:var(--muted);cursor:default;background:none}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
label.l{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{width:100%;border:1px solid var(--line);background:var(--sunk);color:var(--ink);border-radius:10px;padding:10px 12px;font:15px var(--body)}
textarea{resize:vertical}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:14px}
.chk input{margin-top:4px;width:17px;height:17px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;background:var(--surface)}
.seg a.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{display:flex;gap:8px}
.monthnav{display:flex;gap:6px;align-items:center}
.monthnav input[type=month]{width:auto;padding:6px 10px;font-size:14px}
.search input{flex:1}
.attend{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 14px;max-height:340px;overflow:auto;padding:4px}
/* ---- Messages ---- */
.flash{border-radius:10px;padding:11px 14px;font-weight:600}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.flash.err{background:var(--danger-soft);color:var(--danger)}
.banner{border-radius:10px;padding:11px 14px;background:var(--gold-soft);color:var(--gold);font-weight:600;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.banner.trial{background:var(--brand-soft);color:var(--ink);font-weight:500}
.banner.trial b{color:var(--brand)}
.banner.trial.soon{background:var(--gold-soft)}
.banner.trial.soon b{color:var(--gold)}
.editor{display:flex;align-items:center;gap:8px;font-size:12px}
.editor img{display:block;height:auto;background:#fff;border-radius:6px;padding:3px 6px}
.side .editor{padding:4px 10px;color:#9DB3A7;text-decoration:none}
.pub footer .editor{justify-content:center;margin-top:10px}
.empty{text-align:center;padding:26px 10px;color:var(--muted);display:grid;gap:10px;justify-items:center}
.copy{display:flex;gap:6px}
.copy input{font-size:13px}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.progress span{display:block;height:100%;background:var(--brand)}
/* ---- Pages publiques ---- */
.pub{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto}
.pub-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));max-width:1080px;width:100%;margin:0 auto}
.pub-top .logo{color:var(--ink);padding:0}
.pub-top .logo i{background:var(--brand);color:var(--brand-ink)}
.pub main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px 40px}
.auth{max-width:440px;margin:4vh auto 0}
.pub footer{padding:20px 16px;text-align:center;color:var(--muted);font-size:13px}
/* ---- Vitrine (page d'accueil) : terre, or et vert, motifs kente et bogolan ---- */
.vx{
  --terre:#B4532A; --terre-d:#8E3E1E; --or:#D99A2B; --vert:#0E6A4E; --nuit:#22160E; --creme:#FBF3E6; --sable:#F3E4CC;
  --vx-ink:#2A1B10; --vx-muted:#6E5644; --vx-card:#FFFBF4; --vx-line:#E8D5B8;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  background:var(--creme);color:var(--vx-ink)
}
@media (prefers-color-scheme:dark){.vx{
  --creme:#1B130D; --sable:#251A11; --vx-ink:#F6EAD8; --vx-muted:#C9B39A; --vx-card:#2A1E14; --vx-line:#3F2E20;
  --terre:#C7643A; --or:#E7AE45; --vert:#3FB98A}}
.vx .pub-top .logo{color:var(--vx-ink)}
.vx .pub-top .logo i{background:var(--terre);color:#fff}
.vx .pub-top .btn{border-color:var(--vx-line);background:var(--vx-card);color:var(--vx-ink)}
.vx .pub-top .btn.pri{background:var(--vert);border-color:var(--vert);color:#fff}
.vx main{padding:0!important}
.vx footer{background:var(--nuit);color:#C9B39A;padding:22px 16px}
.vx h1,.vx h2{font-family:var(--serif);font-weight:800;letter-spacing:-.01em}
.vx-in{max-width:1080px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px));display:grid;gap:24px}
.vx-band{padding-block:64px}
.vx-band h2{font-size:clamp(28px,4vw,42px);line-height:1.08}
.vx-note{margin:0;font-size:13.5px;color:var(--vx-muted)}
.vx-btn{background:var(--terre);border-color:var(--terre);color:#fff;padding:12px 18px;font-size:15px}
.vx-btn:hover{background:var(--terre-d);border-color:var(--terre-d)}
.vx-btn2{background:transparent;border-color:var(--vx-ink);color:var(--vx-ink);padding:12px 18px;font-size:15px}
/* Accroche */
.vx-hero{max-width:1080px;margin:0 auto;padding:40px max(16px,env(safe-area-inset-left,0px)) 56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
@media (max-width:860px){.vx-hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:12px}}
.vx-pitch{display:grid;gap:20px}
.vx-kicker{margin:0;display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--terre)}
.vx-dia{width:12px;height:12px;margin:6px 18px 0 0;flex:none;background:var(--or);transform:rotate(45deg);box-shadow:16px -16px 0 -3px var(--vert)}
.vx-hero h1{font-size:clamp(38px,6vw,66px);line-height:1;letter-spacing:-.02em}
.vx-hero h1 em{font-style:italic;color:var(--terre)}
.vx-lead{margin:0;font-size:18px;line-height:1.6;color:var(--vx-muted);max-width:52ch}
/* Disque à cercles concentriques derrière le téléphone */
.vx-art{position:relative;display:grid;place-items:center;padding:18px 0}
.vx-art::before{content:"";position:absolute;width:min(100%,430px);aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,var(--terre) 0 14px,var(--or) 14px 18px,var(--terre) 18px 32px,var(--sable) 32px 34px);opacity:.9}
.vx-art::after{content:"";position:absolute;right:4%;top:2%;width:64px;height:64px;background:var(--vert);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.vx-art .v-phone{position:relative;z-index:1}
/* Téléphone WhatsApp (illustration : couleurs fixes, comme une capture d'écran) */
.v-phone{width:100%;max-width:340px;border-radius:30px;border:9px solid #22160E;background:#EFE7DD;overflow:hidden;box-shadow:0 30px 60px rgba(34,22,14,.35);color:#111B21;font-size:13.5px;line-height:1.4}
.v-wa-top{display:flex;gap:10px;align-items:center;background:#0E6A4E;color:#fff;padding:12px 14px}
.v-wa-top small{display:block;font-size:11px;opacity:.8}
.v-av{width:34px;height:34px;border-radius:50%;background:#D99A2B;color:#22160E;display:grid;place-items:center;font-weight:800;font-size:13px}
.v-wa-chat{display:grid;gap:8px;padding:14px 12px 18px;background-image:radial-gradient(rgba(180,83,42,.09) 1px,transparent 1px);background-size:14px 14px}
.v-bub{max-width:88%;padding:8px 10px 18px;border-radius:10px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.v-bub.out{justify-self:end;background:#D9FDD3;border-top-right-radius:2px}
.v-bub.in{justify-self:start;background:#fff;border-top-left-radius:2px}
.v-time{position:absolute;right:8px;bottom:3px;font-size:10.5px;color:#667781}
.v-rcpt{border-left:3px solid #0E6A4E}
.v-stamp{display:inline-block;margin-left:6px;border:2px solid #0E6A4E;color:#0E6A4E;border-radius:6px;padding:0 6px;font-weight:800;font-size:11px;letter-spacing:.08em;transform:rotate(-6deg)}
/* Bande kente : bandes verticales colorées + fines rayures tissées */
.vx-kente{height:26px;background:
  repeating-linear-gradient(0deg,rgba(34,22,14,.22) 0 2px,transparent 2px 6px),
  repeating-linear-gradient(90deg,var(--or) 0 34px,var(--vert) 34px 44px,var(--terre) 44px 70px,#22160E 70px 76px,var(--or) 76px 86px,var(--vert) 86px 112px,#22160E 112px 116px)}
/* Dents (zigzag) sous la section terre */
.vx-teeth{height:18px;background:linear-gradient(135deg,var(--terre) 50%,transparent 50%) 0 0/24px 18px,linear-gradient(225deg,var(--terre) 50%,transparent 50%) 0 0/24px 18px;background-repeat:repeat-x}
/* Pour qui */
.vx-who{padding-block:28px;background:var(--sable)}
.vx-who .vx-in{grid-template-columns:auto 1fr;align-items:center;gap:20px}
@media (max-width:700px){.vx-who .vx-in{grid-template-columns:1fr;gap:12px}}
.vx-label{margin:0;font:800 20px var(--serif);color:var(--terre)}
.vx-who ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.vx-who li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px}
.vx-who li::before{content:"";width:8px;height:8px;background:var(--or);transform:rotate(45deg);flex:none}
/* Section terre : les trois soucis */
.vx-terre{background:var(--terre);color:#FFF6EA}
.vx-terre h2{color:#fff}
.vx-pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.vx-pains article{border-top:3px solid var(--or);padding-top:16px;display:grid;gap:10px;align-content:start}
.vx-pains p{margin:0;line-height:1.6;color:#FBE3CF}
.vx-pains .vx-q{font:800 22px/1.2 var(--serif);color:#fff}
/* Étapes */
.vx-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;counter-reset:s}
.vx-steps li{counter-increment:s;display:grid;gap:8px;align-content:start}
.vx-steps li::before{content:counter(s);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:var(--or);color:#22160E;font:800 22px var(--serif);box-shadow:0 0 0 5px var(--creme),0 0 0 7px var(--or)}
.vx-steps b{font:800 20px var(--serif);margin-top:6px}
.vx-steps span{color:var(--vx-muted);line-height:1.6}
/* Bogolan : petits motifs tracés sur fond sable */
.vx-bogolan{background-color:var(--sable);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23B4532A' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M4 4h10M4 9h10M34 30l6 6m0-6l-6 6'/%3E%3Ccircle cx='38' cy='10' r='3'/%3E%3Ccircle cx='10' cy='38' r='1.5' fill='%23B4532A' fill-opacity='.18'/%3E%3C/g%3E%3C/svg%3E")}
.vx-trust{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:44px}
@media (max-width:860px){.vx-trust{grid-template-columns:minmax(0,1fr);gap:28px}}
.vx-trust>div:first-child{display:grid;gap:16px}
.vx-trust p{margin:0;line-height:1.6;color:var(--vx-muted)}
.vx-ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.vx-ticks li{padding-left:28px;position:relative}
.vx-ticks li::before{content:"";position:absolute;left:3px;top:6px;width:12px;height:7px;border-left:3px solid var(--vert);border-bottom:3px solid var(--vert);transform:rotate(-45deg)}
.vx-report{background:var(--vx-card);border-radius:4px;padding:22px;display:grid;gap:2px;box-shadow:8px 8px 0 var(--terre);border:2px solid var(--vx-ink)}
.vx-report-hd{display:grid;gap:2px;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid var(--vx-ink)}
.vx-report-hd b{font:800 20px var(--serif)}
.vx-report-hd span{font-size:13px;color:var(--vx-muted)}
.vx-row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px dashed var(--vx-line)}
.vx-in-amt{color:var(--vert);font-weight:700}
.vx-out-amt{color:var(--terre);font-weight:700}
.vx-total{border-bottom:0;font-weight:800;font-size:17px}
/* Tarifs */
.vx-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px;align-items:end}
.vx-plan{position:relative;background:var(--vx-card);border:1px solid var(--vx-line);border-radius:14px;padding:26px 20px 20px;display:grid;gap:6px;overflow:hidden}
.vx-plan::before{content:"";position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(90deg,var(--or) 0 18px,var(--vert) 18px 24px,var(--terre) 24px 40px)}
.vx-plan>span:last-child{color:var(--vx-muted);font-size:14px}
.vx-p{font:800 32px var(--serif)}
.vx-p small{font:500 14px var(--body);color:var(--vx-muted)}
.vx-hl{background:var(--nuit);color:#FFF6EA;border-color:var(--nuit);padding-top:34px}
.vx-hl .vx-p small,.vx-hl>span:last-child{color:#C9B39A}
.vx-tag{justify-self:start;background:var(--or);color:#22160E;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
@media (prefers-color-scheme:dark){.vx-hl{border:2px solid var(--or)}}
/* FAQ */
.vx-faq{display:grid;gap:10px;max-width:820px}
.vx-faq details{background:var(--vx-card);border:1px solid var(--vx-line);border-radius:12px;padding:16px 18px}
.vx-faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.vx-faq summary::-webkit-details-marker{display:none}
.vx-faq summary::after{content:"+";font:800 20px/1 var(--serif);color:var(--terre)}
.vx-faq details[open] summary::after{content:"−"}
.vx-faq p{margin:10px 0 0;color:var(--vx-muted);line-height:1.6}
/* Appel final */
.vx-cta{background:var(--nuit);color:#FFF6EA;padding-block:72px;text-align:center;position:relative;
  background-image:repeating-linear-gradient(45deg,rgba(217,154,43,.07) 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,rgba(217,154,43,.07) 0 2px,transparent 2px 22px)}
.vx-cta .vx-in{justify-items:center;gap:20px}
.vx-proverb{margin:0;font:800 italic clamp(28px,4.4vw,48px)/1.1 var(--serif);color:var(--or)}
.vx-cta-sub{margin:0;color:#E5D3BC;font-size:17px}
/* ---- Reçu ---- */
.receipt{max-width:520px;margin:0 auto;background:#fff;color:#111;border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:12px}
.receipt .top{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid #111;padding-bottom:10px}
.receipt .amt{font:700 30px var(--display);text-align:center;padding:10px;background:#F2F4F0;border-radius:10px}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.receipt dt{color:#555}.receipt dd{margin:0;font-weight:600}
.stamp{border:2px solid #0E6A4E;color:#0E6A4E;border-radius:8px;padding:4px 10px;font-weight:800;transform:rotate(-4deg);display:inline-block;letter-spacing:.06em}
.stamp.void{border-color:#B3261E;color:#B3261E}
@media print{
  .side,.mtop,.bnav,.noprint,.flash{display:none!important}
  .shell{display:block}.main{padding:0}
  body{background:#fff}
  .receipt{border:0}
  .card{border:0;padding:0}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Visites de la vitrine : barres par jour */
.vbars{display:flex;align-items:flex-end;gap:2px;height:140px;padding-top:6px}
.vbar{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px}
.vbar span{display:block;width:100%;min-height:2px;background:var(--brand);border-radius:3px 3px 0 0}
.vbar:hover span{background:var(--gold)}
.vbars-axis{display:flex;justify-content:space-between;margin-top:6px}