:root{--vert:#3B8228;--vert-clair:#6BB850;--vert-moyen:#5AA642;--vert-fonce:#1C3A22;--pale:#E6F3DE;--pale2:#EEF6E8;--fond:#F4F8F0;
--texte:#22302A;--gris:#4D5B53;--ligne:#DDE5DA;--champ:#8C9A8A;--rouge:#9F1F17;--rouge-pale:#FBE7E5;--orange:#7A4B00;--orange-pale:#FFF1D6}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font-family:Inter,'Segoe UI',system-ui,sans-serif;font-size:15px;line-height:1.45}
body{min-height:100vh}
button,input,select{font:inherit;color:inherit}
a{color:var(--vert)}
#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--fond);position:relative}
.ecran{flex:1;display:flex;flex-direction:column;gap:16px;padding:22px 18px 110px}
h1{margin:0;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.02em}
p{margin:0}
.gris{color:var(--gris)}.petit{font-size:13px}
.tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{flex:none;width:46px;height:auto;border-radius:10px;background:#fff;padding:3px;box-shadow:0 1px 4px rgba(28,58,34,.14)}
.retour{font-weight:700;padding:8px 4px;border:0;background:none;color:var(--vert);cursor:pointer}
.carte{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.carte.accent{border:2px solid var(--vert)}
.ligne-flex{display:flex;align-items:center;justify-content:space-between;gap:10px}
label.champ{display:flex;flex-direction:column;gap:6px;font-weight:700}
label.champ small{font-weight:400;color:var(--gris)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select{width:100%;min-width:0;padding:12px 13px;border:2px solid var(--champ);border-radius:12px;background:#fff;font-weight:400}
input:focus,select:focus{outline:3px solid #BFE4C7;border-color:var(--vert)}
.duo{display:flex;gap:8px}.duo>*{flex:1;min-width:0}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;padding:15px;border:0;border-radius:14px;background:var(--vert);color:#fff;cursor:pointer;text-decoration:none}
.btn:disabled{background:#A9CB98;cursor:default}
.btn.fonce{background:var(--vert-fonce)}
.btn.contour{background:#fff;color:var(--vert);border:2px solid var(--vert);padding:12px;font-size:15px}
.btn.pointille{background:#fff;color:var(--vert);border:2px dashed var(--vert);padding:11px;font-size:15px}
.btn.discret{background:none;color:var(--gris);text-decoration:underline;font-weight:400;font-size:14px;padding:8px}
.btn.danger{background:#fff;color:var(--rouge);border:1px solid #EBC2BE;font-size:14px;padding:10px}
.btn.petit{font-size:14px;padding:8px 12px;border-radius:10px}
.puces{display:flex;flex-wrap:wrap;gap:8px}
.puce{font-size:14px;font-weight:700;padding:8px 14px;border-radius:999px;cursor:pointer;border:2px solid #C8D6C2;background:#fff;color:var(--texte)}
.puce[aria-pressed=true]{border-color:var(--vert);background:var(--pale);color:var(--vert-fonce)}
.pastille{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.p-retard{background:var(--rouge-pale);color:var(--rouge)}.p-bientot{background:var(--orange-pale);color:var(--orange)}.p-ok{background:var(--pale);color:var(--vert-fonce)}.p-gris{background:#ECEFEA;color:var(--gris)}
.compteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.compteurs div{border-radius:14px;padding:12px;display:flex;flex-direction:column}
.compteurs b{font-size:26px;font-weight:800;line-height:1.1}
.c-r{background:var(--rouge-pale);color:#6E1C16}.c-o{background:var(--orange-pale);color:#5C3900}.c-v{background:var(--pale);color:var(--vert-fonce)}
.item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px;background:#fff;border:1px solid var(--ligne);border-radius:16px;cursor:pointer}
.item .ico{flex:none;width:42px;height:42px;border-radius:12px;background:var(--pale2);display:flex;align-items:center;justify-content:center}
.item .txt{flex:1;min-width:0;display:flex;flex-direction:column}
.item .txt b{font-weight:700}
.item .txt span{font-size:13px;color:var(--gris)}
.item .txt em{font-style:normal;font-size:12px;font-weight:700;color:var(--vert-fonce)}
.item[aria-pressed=true]{border:2px solid var(--vert)}
.toast{background:var(--vert-fonce);color:#fff;border-radius:12px;padding:12px 14px;font-size:14px}
.alerte{background:var(--rouge-pale);color:#6E1C16;border-radius:12px;padding:10px 12px;font-size:14px}
.info{background:var(--pale);color:var(--vert-fonce);border-radius:12px;padding:10px 12px;font-size:14px}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 12px calc(12px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--ligne);z-index:5}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;padding:8px 4px;border:0;border-radius:12px;background:none;color:var(--gris);cursor:pointer}
.nav button[aria-current=page]{background:var(--pale);color:var(--vert-fonce)}
.histo{display:flex;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--ligne)}
.histo span:first-child{flex:none;width:84px;font-size:13px;color:var(--gris)}
.voile{position:fixed;inset:0;background:rgba(20,28,22,.45);display:flex;flex-direction:column;justify-content:flex-end;z-index:10}
.feuille{width:100%;max-width:560px;margin:0 auto;background:var(--fond);border-radius:24px 24px 0 0;padding:20px 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px;max-height:85vh;overflow-y:auto}
.fermer{width:44px;height:44px;border:0;border-radius:50%;background:#E6EBE3;font-size:22px;cursor:pointer}
.coche{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;background:#fff;border:2px solid var(--ligne);border-radius:12px;cursor:pointer}
.coche .case{flex:none;width:24px;height:24px;border-radius:7px;border:2px solid var(--champ);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.coche[aria-pressed=true]{border-color:var(--vert)}.coche[aria-pressed=true] .case{background:var(--vert);border-color:var(--vert)}
.membre{display:flex;flex-direction:column;gap:10px;padding:10px 12px;background:#fff;border:1px solid var(--ligne);border-radius:14px}
.rond{flex:none;width:36px;height:36px;border-radius:50%;background:var(--pale);color:var(--vert-fonce);font-weight:700;display:flex;align-items:center;justify-content:center}
.idees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.idee{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;min-height:76px;background:#fff;border:1px solid var(--ligne);border-radius:14px;cursor:pointer}
.idee span{font-size:13px;color:var(--gris)}
.surtitre{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
/* accueil non connecte, facon flyer */
.vert{background:var(--vert-clair);position:relative;overflow:hidden;min-height:100vh}
.vert .forme{position:absolute;width:440px;height:440px;border-radius:120px;background:var(--vert-moyen);transform:rotate(18deg);right:-250px;top:-150px}
.vert .ecran{position:relative;padding:40px 22px 30px}
.vert .gros-logo{align-self:center;width:150px;border-radius:24px;background:#fff;padding:8px;box-shadow:0 8px 22px rgba(28,58,34,.2)}
.vert .titre{text-align:center;color:var(--vert-fonce);display:flex;flex-direction:column;gap:8px}
.vert .titre h1{font-size:30px;letter-spacing:-.03em}
.vert .boite{background:#fff;border-radius:20px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 8px 22px rgba(28,58,34,.16)}
.vert .bas{text-align:center;font-size:14px;font-weight:600;color:var(--vert-fonce)}
.vert .bas button{background:none;border:0;color:var(--vert-fonce);font-weight:700;text-decoration:underline;cursor:pointer;padding:6px}
@media (min-width:600px){#app{border-left:1px solid var(--ligne);border-right:1px solid var(--ligne)}}