/* Layout : une colonne mobile (max 640px), en-tête collant, barre d'onglets en bas, feuilles qui montent du bas pour tous les formulaires. */
/* Direction : vert profond de la mosquée, or des coupoles, ivoire de la pierre ; arcs de mihrab et étoile à huit branches comme motifs. */
:root{
  --bg:#f5f2ea; --surface:#fffdf7; --surface-2:#ece7da; --ink:#13241d; --muted:#5b685f; --line:#ddd6c5;
  --accent:#0b4d3a; --accent-ink:#fffdf7; --gold:#c39a3c; --night:#0a3a2c;
  --p-com:#c23b6c; --p-mob:#2f62c4; --p-log:#c8651a; --p-deco:#127f6f; --p-fin:#a5781a;
  --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23c39a3c' stroke-opacity='.32' stroke-width='1.2'%3E%3Crect x='16' y='16' width='24' height='24'/%3E%3Crect x='16' y='16' width='24' height='24' transform='rotate(45 28 28)'/%3E%3Ccircle cx='28' cy='28' r='5'/%3E%3Cpath d='M0 0l8 8M56 0l-8 8M0 56l8-8M56 56l-8-8'/%3E%3C/g%3E%3C/svg%3E");
  --ok:#1e8f4f; --warn:#c77d00; --bad:#cf3b3b;
  --font-d:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-b:"DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r:14px; --shadow:0 1px 2px rgba(20,33,27,.06), 0 6px 20px rgba(20,33,27,.06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1511; --surface:#12201a; --surface-2:#1a2b23; --ink:#ece8dc; --muted:#a2b0a7; --line:#26372e;
    --accent:#2a9d74; --accent-ink:#fffdf7; --gold:#dcb456; --night:#0d2c22;
    --p-com:#f06a9a; --p-mob:#6b9cf2; --p-log:#f2944a; --p-deco:#45c2ae; --p-fin:#e0b04a;
    --ok:#4cc77f; --warn:#f0a93a; --bad:#f06b6b; --shadow:0 1px 2px rgba(0,0,0,.3);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1511; --surface:#12201a; --surface-2:#1a2b23; --ink:#ece8dc; --muted:#a2b0a7; --line:#26372e;
  --accent:#2a9d74; --accent-ink:#fffdf7; --gold:#dcb456; --night:#0d2c22;
  --p-com:#f06a9a; --p-mob:#6b9cf2; --p-log:#f2944a; --p-deco:#45c2ae; --p-fin:#e0b04a;
  --ok:#4cc77f; --warn:#f0a93a; --bad:#f06b6b; --shadow:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{font-size:16px; -webkit-text-size-adjust:100%}
html.big{font-size:19px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-b); line-height:1.45}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:8px}
h1,h2,h3{font-family:var(--font-d); text-wrap:balance; margin:0; line-height:1.15}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

.app{max-width:640px; margin:0 auto; min-height:100%; padding-bottom:96px}
.demo-bar{background:var(--surface-2); color:var(--muted); font-size:.78rem; padding:6px 16px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; text-align:center}
.demo-bar button{background:none; border:0; text-decoration:underline; color:var(--ink); padding:4px; font-size:.78rem}
header.top{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{max-width:640px; margin:0 auto; display:flex; align-items:center; gap:10px; padding:10px 16px}
.brand{flex:1; min-width:0}
.brand b{font-family:var(--font-d); font-size:1.05rem; display:block}
.brand small{color:var(--muted); font-size:.78rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.icon-btn{min-width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); display:inline-grid; place-items:center; font-weight:700}
.me-btn{border:0; background:none; padding:0; min-width:44px; height:44px; display:grid; place-items:center}

main{padding:16px; display:flex; flex-direction:column; gap:18px}
.section-title{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.section-title h2{font-size:1.15rem}
.link{background:none; border:0; color:var(--accent); font-weight:700; padding:8px 0; min-height:44px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}

/* Accueil */
.hero{background:var(--pattern) center/56px, linear-gradient(160deg, var(--night), #0b4d3a 70%); color:#fffdf7; border-radius:120px 120px 20px 20px / 70px 70px 20px 20px; padding:34px 20px 20px; display:grid; gap:14px; position:relative; overflow:hidden; border:2px solid color-mix(in srgb, var(--gold) 55%, transparent)}
.hero .mosque{display:block; width:118px; margin:-14px auto -4px; color:var(--gold); position:relative; z-index:1}
.hero-row{display:flex; align-items:flex-end; gap:16px; position:relative; z-index:1}
.hero .tag{text-align:center; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); position:relative; z-index:1}
.hero .collecte{display:flex; align-items:center; gap:10px; font-size:.82rem; position:relative; z-index:1; opacity:.95}
.hero .collecte .bar{flex:1; height:6px}
.arch{border-radius:999px 999px 10px 10px / 999px 999px 10px 10px}
.arch-tile{width:44px; height:52px; display:grid; place-items:center; font-size:1.4rem; background:color-mix(in srgb, var(--pc) 14%, var(--surface)); border:1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); border-radius:999px 999px 10px 10px / 999px 999px 10px 10px; flex:none}
.catch{padding:14px; display:grid; gap:10px; border-left:4px solid var(--gold)}
.catch h2{font-size:1.05rem}
.catch .feed{padding:0}
.profile{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:18px; background:var(--surface); border-radius:var(--r); border:1px solid var(--line)}
.profile .av-arch{width:64px; height:76px; display:grid; place-items:center; color:#fff; font-family:var(--font-d); font-weight:800; font-size:1.5rem; background:hsl(var(--h) 50% 38%); border:2px solid var(--gold)}
.profile h1{font-size:1.4rem}
.profile p{margin:2px 0 0; color:var(--muted); font-size:.88rem}
.todo-cards{display:grid; gap:8px}
.todo-card{display:flex; align-items:center; gap:12px; padding:12px 14px; width:100%; text-align:left; border-left:4px solid var(--pc); color:var(--ink); text-decoration:none}
.todo-card span.g{flex:1}
.todo-card b{display:block}
.todo-card small{color:var(--muted)}
.stats3{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.pole-team{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between}
.pole-team .avatars .av{box-shadow:0 0 0 2px color-mix(in srgb, var(--pc) 12%, var(--surface))}
.jx{font-family:var(--font-d); font-weight:800; font-size:3.4rem; line-height:.9; letter-spacing:-.02em; white-space:nowrap; flex:none}
#toastMsg{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hero h1{font-size:1.15rem}
.hero p{margin:2px 0 0; opacity:.85; font-size:.9rem}
.bar{height:10px; border-radius:99px; background:color-mix(in srgb, currentColor 18%, transparent); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--gold); transition:width .4s}
.hero .meta{display:flex; justify-content:space-between; font-size:.85rem; position:relative; z-index:1}
.alert{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r); background:color-mix(in srgb, var(--bad) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent); font-weight:600; width:100%; text-align:left}
.alert span{flex:1}
.poles-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pole-card{padding:14px; display:grid; gap:10px; text-align:left; border-top:4px solid var(--pc); width:100%; color:var(--ink)}
.pole-card .ph{display:flex; align-items:center; gap:8px; justify-content:space-between}
.pole-card .em{font-size:1.5rem}
.pole-card b{font-family:var(--font-d); font-size:1rem; line-height:1.2}
.pole-card .bar{height:8px; color:var(--ink)}
.pole-card .bar i{background:var(--pc)}
.pole-card small{color:var(--muted); font-size:.8rem}
.pole-card .late-n{color:var(--bad); font-weight:700}
.now-badge{font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--pc); color:#fff; padding:3px 7px; border-radius:99px}
.feed{list-style:none; margin:0; padding:4px 14px}
.feed li{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); font-size:.9rem}
.feed li:last-child{border-bottom:0}
.feed time{color:var(--muted); font-size:.78rem; display:block}
.valid-cta{display:flex; align-items:center; gap:12px; padding:14px; width:100%; text-align:left; border-left:4px solid var(--p-com)}
.valid-cta span{flex:1}
.valid-cta b{display:block}

/* Tâches */
.tasks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.task{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--pc); border-radius:12px; padding:6px 10px 6px 6px}
.task.late{background:color-mix(in srgb, var(--bad) 6%, var(--surface))}
.check{flex:none; width:44px; height:44px; border-radius:12px; border:0; background:none; display:grid; place-items:center}
.check span{width:26px; height:26px; border-radius:8px; border:2px solid var(--muted); display:grid; place-items:center; transition:.15s}
.check svg{opacity:0; transition:.15s}
.task.done .check span{background:var(--ok); border-color:var(--ok)}
.task.done .check svg{opacity:1}
.task-body{flex:1; min-width:0; background:none; border:0; text-align:left; padding:6px 0; display:grid; gap:3px}
.t-title{font-weight:600; overflow-wrap:anywhere}
.task.done .t-title{text-decoration:line-through; color:var(--muted); font-weight:500}
.t-meta{display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.78rem; color:var(--muted)}
.late-txt{color:var(--bad); font-weight:700}
.pill{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:99px; background:color-mix(in srgb, var(--c, var(--muted)) 15%, transparent); color:var(--c, var(--muted)); white-space:nowrap}
.pill.bad{--c:var(--bad)}
.avatars{display:flex; flex:none}
.avatars .av{margin-left:-8px; box-shadow:0 0 0 2px var(--surface)}
.avatars .av:first-child{margin-left:0}
.av{width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center; font-size:.72rem; font-weight:700; color:#fff; background:hsl(var(--h) 55% 42%); flex:none}
.av.lg{width:40px; height:40px; font-size:.9rem}
.av.sm{width:22px; height:22px; font-size:.62rem}
.quick{display:flex; gap:8px}
.quick input{flex:1; min-width:0; height:48px; border-radius:12px; border:1px solid var(--line); background:var(--surface); padding:0 14px}
.btn{min-height:48px; padding:0 18px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; color:var(--ink)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.wa{background:#1fa855; color:#fff; border-color:#1fa855}
.btn.ghost{background:none}
.btn.danger{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 40%, transparent)}
.btn.sm{min-height:38px; padding:0 12px; font-size:.85rem; border-radius:10px}
.btn.block{width:100%}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap; overflow:visible}
.chip{flex:none; min-height:38px; padding:0 14px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-weight:600; font-size:.88rem; display:inline-flex; align-items:center; gap:6px}
.chip.on{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .n{opacity:.7; font-variant-numeric:tabular-nums}
.empty{padding:22px 16px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r)}
.group-label{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:6px 2px 0}
.group-label.bad{color:var(--bad)}
.seg{display:flex; background:var(--surface-2); border-radius:12px; padding:4px; gap:4px}
.seg button{flex:1; min-height:40px; border:0; border-radius:9px; background:none; font-weight:700; font-size:.9rem; color:var(--muted)}
.seg button.on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

/* En-tête de pôle */
.pole-head{display:grid; gap:12px; padding:26px 16px 16px; border-radius:110px 110px 18px 18px / 46px 46px 18px 18px; background:color-mix(in srgb, var(--pc) 12%, var(--surface)); border:1px solid color-mix(in srgb, var(--pc) 30%, transparent)}
.pole-head .row{display:flex; align-items:center; gap:12px}
.pole-head .em{font-size:2rem}
.pole-head h1{font-size:1.4rem}
.pole-head p{margin:0; color:var(--muted); font-size:.88rem}
.pole-head .bar{color:var(--ink)}
.pole-head .bar i{background:var(--pc)}
.tabs{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none; min-height:42px; padding:0 16px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-weight:700; font-size:.9rem}
.tabs button.on{background:var(--pc); border-color:var(--pc); color:#fff}
.easy{font-size:1.08rem}
.easy .t-title{font-size:1.05rem}

/* Contenus Com */
.content{overflow:hidden}
.thumb{aspect-ratio:16/9; display:grid; place-items:center; position:relative; color:#fff; background:var(--g)}
.thumb img,.thumb video{width:100%; height:100%; object-fit:cover; display:block; background:#000}
.thumb .ty{font-family:var(--font-d); font-weight:800; font-size:1.6rem; text-align:center; padding:0 16px; text-shadow:0 2px 12px rgba(0,0,0,.25)}
.thumb .ty small{display:block; font-family:var(--font-b); font-size:.8rem; font-weight:600; opacity:.9}
.c-body{padding:14px; display:grid; gap:10px}
.c-top{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.c-body h3{font-size:1.08rem}
.c-meta{color:var(--muted); font-size:.84rem; display:flex; gap:6px 12px; flex-wrap:wrap; align-items:center}
.caption{background:var(--surface-2); border-radius:10px; padding:10px 12px; font-size:.9rem; white-space:pre-wrap; margin:0}
.like{display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:99px; border:1px solid var(--line); background:var(--surface); font-weight:700}
.like.on{background:color-mix(in srgb, var(--p-com) 14%, var(--surface)); border-color:var(--p-com); color:var(--p-com)}
.opts{display:grid; gap:8px}
.opts .q{font-weight:700; font-size:.88rem}
.opt{position:relative; display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); text-align:left; width:100%; overflow:hidden}
.opt .fill{position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--p-com) 12%, transparent); z-index:0; transition:width .3s}
.opt > *:not(.fill){position:relative; z-index:1}
.opt .lbl{flex:1; font-weight:600}
.opt.mine{border-color:var(--p-com)}
.opt.chosen{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 10%, var(--surface))}
.opt-row{display:flex; gap:6px; align-items:stretch}
.opt-row .opt{flex:1}
.c-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:space-between}

/* Contacts */
.counters{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.counter{padding:12px; text-align:center}
.counter b{display:block; font-family:var(--font-d); font-size:1.5rem; font-variant-numeric:tabular-nums}
.counter small{color:var(--muted); font-size:.75rem}
.contact{padding:4px 12px}
.contact > button{width:100%; display:flex; align-items:center; gap:10px; background:none; border:0; text-align:left; padding:10px 0; min-height:56px}
.contact .nm{flex:1; min-width:0}
.contact .nm b{display:block}
.contact .nm small{color:var(--muted)}
.contact .more{display:grid; gap:10px; padding:0 0 14px}
.phone{font-variant-numeric:tabular-nums; color:var(--muted); font-size:.9rem}
.st-btns{display:flex; gap:6px; flex-wrap:wrap}
.search{height:46px; border-radius:12px; border:1px solid var(--line); background:var(--surface); padding:0 14px; width:100%}

/* Pitch */
.pitch{padding:18px; display:grid; gap:14px}
.pitch ol{margin:0; padding-left:1.2em; display:grid; gap:10px}
.pitch li::marker{font-weight:800; color:var(--p-mob)}
.pitch .say{white-space:pre-wrap}

/* Lock */
.lock{padding:24px 18px; display:grid; gap:14px; text-align:center; justify-items:center}
.lock input{width:180px; height:56px; text-align:center; font-size:1.6rem; letter-spacing:.4em; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-variant-numeric:tabular-nums}
.lock p{margin:0; color:var(--muted)}

/* Finance */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{padding:14px}
.tile small{color:var(--muted); font-size:.8rem; display:block}
.tile b{font-family:var(--font-d); font-size:1.45rem; font-variant-numeric:tabular-nums}
.goal{padding:14px; display:grid; gap:8px}
.goal .bar{color:var(--ink)}
.goal .bar i{background:var(--p-fin)}
.rows{list-style:none; margin:0; padding:0 14px}
.rows li{display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--line)}
.rows li:last-child{border-bottom:0}
.rows .grow{flex:1; min-width:0}
.rows .grow b{display:block; overflow-wrap:anywhere}
.rows .grow small{color:var(--muted)}
.amt{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.proof{width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--line)}

/* Déco */
.ideas{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.idea{overflow:hidden; display:flex; flex-direction:column}
.idea .thumb{aspect-ratio:4/3}
.idea .thumb .ty{font-size:1.05rem}
.idea .ib{padding:10px; display:grid; gap:8px; flex:1}
.idea .ib b{font-size:.92rem; line-height:1.25}
.idea .ia{display:flex; gap:6px; align-items:center; justify-content:space-between; margin-top:auto}
.star{position:absolute; top:8px; left:8px; background:var(--gold); color:#1a1300; font-weight:800; font-size:.72rem; padding:4px 8px; border-radius:99px}

/* Programme */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{content:""; position:absolute; left:58px; top:8px; bottom:8px; width:2px; background:var(--line)}
.timeline li{display:flex; gap:14px; align-items:flex-start; padding:8px 0}
.timeline time{width:46px; flex:none; font-weight:800; font-family:var(--font-d); font-variant-numeric:tabular-nums; padding-top:12px; text-align:right}
.timeline .dot{width:14px; height:14px; border-radius:50%; background:var(--accent); flex:none; margin-top:16px; box-shadow:0 0 0 4px var(--bg); position:relative; z-index:1}
.timeline .tl-card{flex:1; padding:10px 12px; text-align:left; display:grid; gap:2px; width:100%}
.timeline .tl-card small{color:var(--muted)}

/* Barre du bas */
nav.bottom{position:fixed; bottom:0; left:0; right:0; z-index:30; background:var(--surface); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
nav.bottom .in{max-width:640px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr)}
nav.bottom a{display:grid; justify-items:center; gap:2px; padding:8px 0 10px; text-decoration:none; color:var(--muted); font-size:.74rem; font-weight:700; min-height:56px; position:relative}
nav.bottom a.on{color:var(--accent)}
nav.bottom a.on::before{content:""; position:absolute; top:0; left:30%; right:30%; height:3px; border-radius:0 0 3px 3px; background:var(--accent)}
nav.bottom .badge{position:absolute; top:4px; left:calc(50% + 6px); background:var(--bad); color:#fff; font-size:.65rem; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 4px}

/* Feuille */
.sheet-wrap{position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center}
.sheet-bg{position:absolute; inset:0; background:rgba(5,12,9,.45); opacity:0; transition:opacity .2s}
.sheet{position:relative; width:100%; max-width:640px; max-height:90%; overflow:auto; background:var(--surface); border-radius:22px 22px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(30px); opacity:0; transition:.22s}
.sheet-wrap.open .sheet-bg{opacity:1}
.sheet-wrap.open .sheet{transform:none; opacity:1}
.grab{width:42px; height:5px; border-radius:3px; background:var(--line); margin:4px auto 10px}
.sheet-form{display:grid; gap:14px}
.sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.sheet-head h2{font-size:1.25rem}
.fld{display:grid; gap:6px}
.fld > span{font-weight:700; font-size:.88rem}
.fld input,.fld select,.fld textarea{width:100%; min-height:48px; border-radius:12px; border:1px solid var(--line); background:var(--bg); padding:10px 12px}
.fld textarea{resize:vertical}
.fld-check{display:flex; gap:10px; align-items:center; min-height:44px; font-weight:600}
.fld-check input{width:22px; height:22px; accent-color:var(--accent)}
.hint{color:var(--muted); font-size:.78rem}
.sheet-actions{display:flex; gap:8px; justify-content:space-between; position:sticky; bottom:-16px; background:var(--surface); padding:10px 0 4px}
.sheet-actions .primary{flex:1}
.preview{max-height:160px; border-radius:10px; max-width:100%}

/* Onboarding */
.onb{position:fixed; inset:0; z-index:60; background:var(--bg); overflow:auto; display:flex; justify-content:center}
.onb-in{max-width:520px; width:100%; padding:28px 20px 40px; display:grid; gap:18px; align-content:start}
.onb-window{height:190px; display:grid; place-items:end center; background:var(--pattern) center/56px, linear-gradient(170deg, var(--night), #0b4d3a); border:2px solid var(--gold); border-radius:999px 999px 18px 18px / 160px 160px 18px 18px; color:var(--gold); overflow:hidden}
.onb-window svg{width:190px; margin-bottom:-2px}
.onb .tag{font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold)}
.onb h1{font-size:2rem}
.onb p{margin:0; color:var(--muted)}
.onb .chips{flex-wrap:wrap}
.onb .chip{min-height:48px; font-size:1rem}

/* Toast + célébration */
.toast{position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(20px); z-index:70; background:var(--ink); color:var(--bg); padding:10px 10px 10px 16px; border-radius:14px; display:flex; gap:12px; align-items:center; box-shadow:0 8px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:.2s; max-width:calc(100% - 32px); font-weight:600}
.toast.show{opacity:1; transform:translateX(-50%); pointer-events:auto}
.toast button{background:none; border:0; color:var(--gold); font-weight:800; min-height:40px; padding:0 8px}
.spark{position:fixed; z-index:80; pointer-events:none; font-size:18px; animation:fly .8s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0}}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }
@media (min-width:700px){ .poles-grid{grid-template-columns:repeat(3,1fr)} .ideas{grid-template-columns:repeat(3,1fr)} }

/* Ajouts version en ligne */
.sync-bar{position:sticky; top:0; z-index:25; background:var(--warn); color:#1a1300; font-size:.8rem; font-weight:700; text-align:center; padding:6px 12px}
.sync-bar.bad{background:var(--bad); color:#fff}
.top-in .icon-btn{min-width:40px}
.rows .av{flex:none}
code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace}

.pin-input{font-size:1.8rem !important; letter-spacing:.5em; text-align:center; font-variant-numeric:tabular-nums}
.onb .link{justify-self:start}
/* v5 : checklist avant diffusion */
.chk-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:12px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer}
.chk-row .box{flex:none; width:26px; height:26px; border-radius:8px; border:2px solid var(--line); display:grid; place-items:center; color:#fff; font-weight:800}
.chk-row.on{border-color:var(--ok)}
.chk-row.on .box{background:var(--ok); border-color:var(--ok)}
.chk-row small{display:block; color:var(--muted)}
.chk-row:disabled{opacity:.55; cursor:not-allowed}
.chk-row .grow{flex:1}
details summary{cursor:pointer; padding:6px 0}
.rows li.wrap{flex-wrap:wrap}
.rows li.wrap > .grow{flex:1 1 100%}

/* =========================================================
   Tablette et ordinateur : la même appli, mise en page élargie
   ========================================================= */
nav.bottom .side-only,.side-only{display:none}
.home-grid{display:flex; flex-direction:column; gap:18px}
.home-main,.home-side{display:contents}
.home-side .catch{order:-1}
@media (hover:hover){
  .card.contact:hover,.task:hover,.chk-row:hover:not(:disabled){border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
  .chip:hover{border-color:var(--accent)}
}

/* Tablette (à partir de 700 px) */
@media (min-width:700px){
  .app,.top-in{max-width:920px}
  nav.bottom .in{max-width:920px}
  main{padding:22px 24px}
  .sheet-wrap{align-items:center; padding:24px}
  .sheet{max-width:600px; border-radius:22px; max-height:86vh; padding:12px 22px 20px}
  .grab{display:none}
  .sheet-actions{bottom:-20px}
  .toast{bottom:96px}
  .tiles{grid-template-columns:repeat(4,1fr)}
  .counters{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .todo-cards{grid-template-columns:1fr 1fr}
  .tab-contenus,.cards-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr)) !important; align-items:start}
  .tab-contenus > :not(.card.content){grid-column:1/-1}
  .cards-grid > .empty{grid-column:1/-1}
  #klist{grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); align-items:start}
  #klist > .empty{grid-column:1/-1}
}

/* Ordinateur (à partir de 1024 px) : menu latéral */
@media (min-width:1024px){
  :root{--side:248px}
  header.top{margin-left:var(--side)}
  .top-in{max-width:1240px; padding:12px 28px}
  .app{max-width:none; margin-left:var(--side); padding-bottom:40px}
  main{max-width:1240px; margin:0 auto; padding:28px 32px 40px; gap:22px}
  nav.bottom{top:0; right:auto; width:var(--side); border-top:0; border-right:1px solid var(--line); overflow-y:auto; padding:16px 12px; display:flex; flex-direction:column}
  nav.bottom .in{display:flex; flex-direction:column; gap:2px; max-width:none; flex:1}
  nav.bottom a{display:flex; align-items:center; justify-items:start; gap:12px; padding:10px 12px; min-height:44px; border-radius:12px; font-size:.95rem; color:var(--ink)}
  nav.bottom a svg{flex:none; color:var(--muted)}
  nav.bottom a:hover{background:var(--surface-2)}
  nav.bottom a.on{background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--accent)}
  nav.bottom a.on svg{color:var(--accent)}
  nav.bottom a.on::before{top:8px; bottom:8px; left:0; right:auto; width:3px; height:auto; border-radius:0 3px 3px 0}
  nav.bottom .badge{position:static; margin-left:auto}
  nav.bottom .side-only,.side-only{display:flex}
  nav.bottom a.on.parent{background:none; color:var(--ink)}
  nav.bottom a.on.parent svg{color:var(--muted)}
  nav.bottom a.on.parent::before{display:none}
  .rows li.wrap > .grow{flex:1 1 0}
  .side-sec{margin:18px 12px 6px; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
  nav.bottom a.side-pole{font-size:.9rem; padding:8px 12px; min-height:40px}
  .side-pole .sp-ic{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:10px; background:color-mix(in srgb, var(--pc) 16%, var(--surface))}
  .side-pole .sp-n{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .side-pole small{color:var(--muted); font-size:.75rem}
  nav.bottom a.side-pole.on{background:color-mix(in srgb, var(--pc) 14%, var(--surface)); color:var(--ink)}
  nav.bottom a.side-pole.on::before{background:var(--pc)}
  .side-foot{margin-top:auto; padding:16px 12px 4px; flex-direction:column; align-items:center; gap:2px; text-align:center; color:var(--muted)}
  .side-foot b{font-family:var(--font-d); font-size:1.6rem; color:var(--ink)}
  .hero-mini svg{width:72px; color:var(--gold); display:block}
  .toast{bottom:28px; left:calc(50% + var(--side) / 2)}
  .sheet-wrap{padding-left:calc(var(--side) + 24px)}

  /* Accueil : colonne principale + colonne d'activité */
  main[data-v="accueil"] .home-grid{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); gap:24px; align-items:start}
  main[data-v="accueil"] .home-main,main[data-v="accueil"] .home-side{display:flex; flex-direction:column; gap:18px}
  main[data-v="accueil"] .home-side{position:sticky; top:84px}
  main[data-v="accueil"] .hero{padding:30px 36px 24px}
  .poles-grid{grid-template-columns:repeat(3,1fr)}

  /* Listes plus larges */
  .tasks{display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:8px}
  main[data-v="moi"] .todo-cards{grid-template-columns:repeat(3,1fr)}
  .tab-dons .rows li,.tab-factures .rows li{padding:10px 0}
  .ideas{grid-template-columns:repeat(4,1fr)}
  .pole-head{padding:28px 28px 20px}
  .tab-contenus,.cards-grid,#klist{grid-template-columns:repeat(auto-fill,minmax(340px,1fr)) !important}
}
@media (min-width:1500px){
  .ideas{grid-template-columns:repeat(5,1fr)}
}

/* =========================================================
   Rendu « vraie application » sur mobile : écran fixe
   ========================================================= */
html{overflow-x:hidden; overscroll-behavior:none; touch-action:manipulation}
body{overflow-x:clip; overscroll-behavior:none; max-width:100vw;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
/* le texte reste sélectionnable là où on en a besoin */
input,textarea,select,[contenteditable],.say,.caption,.phone,code,.feed li,.sheet .hint{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
img,svg,a{-webkit-user-drag:none}
/* les rangées qui défilent de côté (filtres, onglets) ne font plus bouger la page */
.chips,.tabs{overscroll-behavior-x:contain; touch-action:pan-x pan-y; scrollbar-width:none}
.chips::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.sheet,.onb{overscroll-behavior:contain}
/* les champs ne déclenchent pas le zoom automatique de l'iPhone */
input,select,textarea{font-size:max(16px,1rem)}
/* appli installée : marges des encoches */
@media (display-mode: standalone){
  header.top{padding-top:env(safe-area-inset-top)}
  .top-in{padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right))}
}
.install-card{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; border-color:color-mix(in srgb, var(--accent) 35%, var(--line))}
.install-card .ic{font-size:1.6rem}
.install-card .g{flex:1; min-width:0; display:grid}
.install-card small{color:var(--muted)}
.install-card .icon-btn{min-width:36px; height:36px; border:0; background:none; color:var(--muted)}
.steps{margin:0; padding-left:22px; display:grid; gap:12px; font-size:1.02rem}
.kbd{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:7px; border:1px solid var(--line); background:var(--surface-2); font-weight:800}