:root{--paper:#f7f4ec;--ink:#1d2733;--muted:#5d6978;--line:#e2dccb;--brand:#4f8a3c;--brand2:#3f7a30;--deep:#2c5a29;--gold:#c9a24b;--emerald:#0f7a5c;--bad:#b3261e;--wa:#1f9d55;
 --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Geeza Pro","Noto Naskh Arabic",serif;--sans:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.6;background:linear-gradient(rgba(247,244,236,.94),rgba(247,244,236,.94)),url(zellige-green.svg) var(--paper);background-size:auto,75px auto}
@media (max-width:640px){body{background-size:auto,40px auto}}
a{color:var(--brand2)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.small{font-size:.85rem}.muted{color:var(--muted)}.center{text-align:center}
.star{width:1.4em;height:1.4em;flex:0 0 auto;color:var(--gold)}
/* barre du haut : même dégradé et courbe que le programme */
.top{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding:.8rem clamp(1rem,4vw,3rem);background:radial-gradient(circle at 92% 0,#dbdb5c 0,rgba(219,219,92,0) 38%),linear-gradient(100deg,#5a9143 0%,#75af58 55%,#94bd58 100%)}
.top::after{content:"";position:absolute;inset-inline:0;bottom:-24px;height:24px;pointer-events:none;background:linear-gradient(100deg,#5a9143 0%,#75af58 55%,#94bd58 100%);border-radius:0 0 50% 50%/0 0 100% 100%}
.brand{display:flex;align-items:center;gap:.5rem;color:#fff;text-decoration:none;font-family:var(--serif);font-size:1.35rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.brand b{font-weight:700;color:#fff6d1}
.brand .star{width:1.5rem;height:1.5rem;color:#fff6d1}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;font-size:.95rem}
.tools a{color:#13260f;text-decoration:none;font-weight:500}
.tools a:hover{text-decoration:underline}
.tools .pill{background:#fff;color:var(--deep);padding:.35rem .9rem;border-radius:99px;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.langs a{padding:0 .3rem;opacity:.75}.langs a.cur{opacity:1;font-weight:800;text-decoration:underline}
main{padding-top:24px}
.band{height:7px;background:repeating-linear-gradient(90deg,var(--brand) 0 28px,var(--gold) 28px 36px,var(--emerald) 36px 64px,var(--gold) 64px 72px)}
h1,h2,h3{font-family:var(--serif);line-height:1.18;margin:0}
h1{font-size:clamp(2rem,4.6vw,3.4rem);color:var(--deep);letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--deep);margin-bottom:1rem}
h3{font-size:1.15rem}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0;line-height:1.35}
.sec{max-width:1100px;margin:0 auto;padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,2rem)}
.sec.narrow{max-width:640px}
.sub{color:var(--muted);max-width:62ch}
.lead{font-size:1.15rem;max-width:52ch;color:#2d3946}
.btn{display:inline-block;padding:.65rem 1.2rem;border-radius:10px;border:2px solid var(--brand2);color:var(--deep);background:transparent;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.btn:hover{background:rgba(79,138,60,.1)}
.btn.primary{background:var(--deep);border-color:var(--deep);color:#fff}
.btn.primary:hover{background:var(--brand2)}
.btn.big{padding:.85rem 1.7rem;font-size:1.05rem}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0 1rem}
/* accueil : l'élément mémorable est le vrai geste du programme, le rappel WhatsApp */
.hero{max-width:1100px;margin:0 auto;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.mock{margin:0;position:relative;padding-bottom:1rem}
.mock-app{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(44,90,41,.18)}
.mock-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;color:#fff;background:linear-gradient(100deg,#5a9143,#94bd58)}
.mock-bar .star{color:#fff6d1;width:1.2rem;height:1.2rem}
.mock-table{width:100%;border-collapse:collapse;font-size:.95rem}
.mock-table th,.mock-table td{padding:.6rem 1rem;text-align:start;border-bottom:1px solid var(--line)}
.mock-table th{color:var(--muted);font-weight:600;font-size:.82rem}
.mock-table .num{text-align:end;white-space:nowrap}
.neg{color:var(--bad);font-weight:700}
.mock-table tr.hot{background:#f1f7ec}
.wa-btn{display:inline-flex;align-items:center;gap:.3rem;background:var(--wa);color:#fff;border-radius:99px;padding:.15rem .65rem;font-size:.8rem;font-weight:700}
.wa-btn svg{width:.95rem;height:.95rem}
.bubble{position:relative;margin:.9rem 0 0;margin-inline:auto 0;width:min(78%,360px);background:#e3f6d3;border:1px solid #c5e3ae;border-radius:14px 14px 14px 4px;padding:.8rem 1rem;box-shadow:0 8px 22px rgba(0,0,0,.14);font-size:.92rem;color:#1f2d1a}
[dir=rtl] .bubble{border-radius:14px 14px 4px 14px}
.bubble p{margin:0}
.mock figcaption{margin-top:.8rem;font-size:.88rem;color:var(--muted);text-align:center}
/* problème -> changement : lignes de registre */
.ledger .row{display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;padding:1rem 0;border-top:1px dashed #cfc6ad}
.ledger .row:last-child{border-bottom:1px dashed #cfc6ad}
.ledger p{margin:0}
.ledger .from{color:var(--muted)}
.ledger .to{font-weight:600;color:var(--deep);border-inline-start:3px solid var(--gold);padding-inline-start:1rem}
.features{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.features article{display:flex;gap:.9rem;padding:1.1rem 0;border-top:1px solid var(--line)}
.features h3{color:var(--deep);margin-bottom:.25rem}
.features p{margin:0;color:#33404d}
.features .star{margin-top:.15rem;width:1.1rem;height:1.1rem}
.secure{background:var(--deep) url(zellige.svg);background-size:120px auto;position:relative;color:#eef6e8}
.secure::before{content:"";position:absolute;inset:0;background:rgba(44,90,41,.93)}
.secure .inner{position:relative;max-width:1100px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) clamp(1rem,4vw,2rem)}
.secure h2{color:#fff}
.secure p{max-width:62ch;font-size:1.05rem}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.plan{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:6px 6px 12px 12px;padding:1.2rem}
.plan.feature{border-top-color:var(--gold);background:#fffdf5}
.plan .d{margin:0;color:var(--muted);font-size:.92rem}
.plan .price{margin:.4rem 0 .8rem;font-family:var(--serif);font-size:1.9rem;color:var(--deep);line-height:1.1}
.plan .price small{font-family:var(--sans);font-size:.78rem;color:var(--muted);display:block;margin-top:.2rem}
.plan .price.tbc{font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.plan .btn{margin-top:auto;text-align:center}
details{border-top:1px solid var(--line);padding:.9rem 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:700;color:var(--deep)}
details p{margin:.6rem 0 0;color:#33404d}
.cta{text-align:center;padding:clamp(3rem,7vw,5rem) 1rem;background:linear-gradient(100deg,#5a9143,#94bd58);color:#fff}
.cta h2{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cta .btn.primary{background:#fff;color:var(--deep);border-color:#fff}
.foot{text-align:center;color:var(--muted);padding-bottom:5rem}
.foot p{margin:.8rem 0 0}
.wa-float{position:fixed;inset-block-end:1rem;inset-inline-end:1rem;z-index:20;display:flex;align-items:center;gap:.5rem;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;padding:.65rem 1rem;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.wa-float svg{width:1.3rem;height:1.3rem}
/* formulaire */
.form{display:grid;gap:1rem;margin-top:1.4rem}
.form label{display:grid;gap:.3rem;font-weight:600}
.form input{font:inherit;padding:.7rem .8rem;border:1.5px solid #bfb89f;border-radius:9px;background:#fff;width:100%}
.form small{font-weight:400;color:var(--muted)}
.three{align-items:end;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.plan-chosen{margin:0;padding:.7rem 1rem;background:#eef5e8;border-inline-start:4px solid var(--gold);border-radius:6px}
.plan-chosen span{color:var(--muted);margin-inline-end:.4rem}
.err{background:#fdecea;color:#8a1c14;border:1px solid #f1b9b3;padding:.7rem 1rem;border-radius:8px;margin:.8rem 0}
.warn{background:#fff6df;border:1px solid #ecd28c;padding:.6rem 1rem;border-radius:8px}
.big-star{width:4rem;height:4rem}
.head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:10px}
table.admin{width:100%;border-collapse:collapse;font-size:.92rem}
table.admin th,table.admin td{padding:.6rem .8rem;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
@media (max-width:820px){
 .hero{grid-template-columns:1fr}
 .features{grid-template-columns:1fr}
 .plans{grid-template-columns:1fr}
 .ledger .row{grid-template-columns:1fr;gap:.4rem}
 .three{grid-template-columns:1fr}
 .tools{gap:.3rem .8rem;font-size:.88rem}
 .wa-float span{display:none}.wa-float{padding:.8rem}
}

.setup{margin:1.2rem 0 0;padding:.7rem 1rem;background:#fffdf5;border-inline-start:4px solid var(--gold);border-radius:6px;color:#33404d}
.bld{display:grid;gap:.5rem;padding:.8rem 1rem;background:#fff;border:1px solid var(--line);border-radius:10px}
.bld h3{font-size:1rem;color:var(--deep)}
.inline{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap}
.inline label{flex:1;min-width:140px}
.default-btn{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* en-tete fixe */
.top{position:sticky;top:0}

td.ltr,th.ltr{display:table-cell}

/* administration */
.adnav a.cur{font-weight:800;text-decoration:underline}
.adnav form.inline{display:inline;margin:0}
.adnav button.pill{border:0;font:inherit;font-weight:700;cursor:pointer;background:#fff;color:var(--deep);padding:.35rem .9rem;border-radius:99px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.okmsg{background:#e7f4de;border:1px solid #b9d9a3;padding:.6rem 1rem;border-radius:8px}
.form select{font:inherit;padding:.7rem .8rem;border:1.5px solid #bfb89f;border-radius:9px;background:#fff;width:100%}
.form input[aria-invalid="true"]{border-color:#c0392b;background:#fdf3f2}
.form input[type=file]{padding:.5rem}
.warn a{color:inherit}

/* abonnement et factures */
.paybox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:1rem 0}
.paybox h2,.paybox h3{margin-top:0}
.sumtab{width:100%;border-collapse:collapse}
.sumtab td{padding:.3rem 0}.sumtab td.num{text-align:end}.sumtab tr.tot td{border-top:2px solid var(--gold);font-weight:800;padding-top:.5rem}
.paytabs{display:flex;gap:.5rem;margin:.6rem 0 1rem}
.paytabs a{padding:.55rem 1.1rem;border:2px solid var(--brand2);border-radius:10px;text-decoration:none;color:var(--deep);font-weight:700;background:#fff}
.paytabs a.cur{background:var(--deep);color:#fff;border-color:var(--deep)}
.bank{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem;margin:0}
.bank dt{font-weight:700}.bank dd{margin:0}
td.rowacts{min-width:12rem}
td.rowacts form.stack{display:grid;gap:.3rem;margin-top:.4rem}
td.rowacts input{font:inherit;padding:.4rem .5rem;border:1.5px solid #bfb89f;border-radius:8px;width:100%}
td.rowacts form.inline{display:inline;margin:0}
tr.voided td{opacity:.55;text-decoration:line-through}
tr.voided td.rowacts,tr.voided td:nth-child(5){text-decoration:none}
.bank dd{justify-self:start}
.bank dd.ltr{white-space:nowrap}
@media (max-width:480px){.bank{grid-template-columns:1fr}.bank dd{margin-bottom:.5rem}}