:root{
  --paper:#FFFAF0; --card:#fff; --ink:#2B2824; --muted:#6F675C; --line:#E6DDCB;
  --green:#2F5D3C; --green-d:#234830; --saffron:#E8A92D; --sun:#FBEBC5; --red:#A63D2F;
  --font:"Avenir Next","Trebuchet MS","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--font)}
h1,h2,h3{line-height:1.25;margin:0 0 .6rem;font-weight:700}
h1{font-size:1.7rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:0 0 .9rem} a{color:var(--green)}
code,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;word-break:break-all}
.muted{color:var(--muted)} .small{font-size:.88rem}
.sr{position:absolute;left:-9999px}
.wrap{max-width:720px;margin:0 auto;padding:1.2rem 1rem 6rem}
.wrap.wide{max-width:1100px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.15rem;margin:0 0 1rem}
.prose ul{padding-left:1.2rem;margin:0 0 .9rem} .prose li{margin-bottom:.35rem}
.prose p:last-child,.card p:last-child{margin-bottom:0}

/* Accueil */
.hero{padding:1.6rem 0 1.1rem}
.kicker{color:var(--green);font-weight:700;margin-bottom:.2rem}
.hero h1{font-size:2.15rem;margin-bottom:.5rem}
.lead{font-size:1.1rem;color:var(--muted);max-width:34rem}

/* Champs */
label{display:block;font-weight:600}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.65rem .75rem;margin-top:.35rem}
textarea{resize:vertical;min-height:5.5rem;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:3px solid var(--sun);border-color:var(--saffron)}
input:disabled,textarea:disabled{background:#F7F2E6;color:var(--ink);opacity:1}
.stack>*+*{margin-top:.9rem}

/* Boutons */
.btn{display:inline-block;font:inherit;font-weight:700;text-align:center;text-decoration:none;cursor:pointer;
  background:var(--green);color:#fff;border:2px solid var(--green);border-radius:999px;padding:.6rem 1.25rem;line-height:1.3}
.btn:hover{background:var(--green-d);border-color:var(--green-d)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:var(--sun)}
.btn.final{background:var(--saffron);border-color:var(--saffron);color:#2B2208}
.btn.danger{background:#fff;border-color:var(--red);color:var(--red)}
.btn.sm{padding:.3rem .8rem;font-size:.9rem}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.link:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:inherit;font-size:.9rem;padding:.4rem 0}

/* Barre du haut (répondant) */
.bar{position:sticky;top:0;z-index:10;background:var(--green);color:#fff;padding-top:env(safe-area-inset-top)}
.bar-in{max-width:720px;margin:0 auto;padding:.6rem 1rem .5rem}
.bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.35rem}
.brand{color:#fff;font-weight:700;text-decoration:none}
.state{font-size:.85rem;opacity:.9}
.jump select{margin:0;padding:.45rem .6rem;border:0;background:#fff;font-weight:600}
.progress{height:5px;background:rgba(255,255,255,.28);border-radius:3px;margin-top:.55rem;overflow:hidden}
.progress div{height:100%;width:0;background:var(--saffron);transition:width .3s}

/* Formulaire */
.banner{border-radius:12px;padding:.8rem 1rem;margin:0 0 1.2rem;background:var(--sun);font-size:.95rem}
.banner.ok{background:#E4F0E5} .banner.soft{background:#fff;border:1px solid var(--line);color:var(--muted)}
.form .step{color:var(--muted);font-size:.9rem;margin-bottom:.1rem}
.form h1{font-size:1.65rem}
.intro{color:var(--muted);margin-bottom:1.4rem}
.q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.05rem 1rem 1rem;margin:0 0 1rem}
.ql{font-weight:600;font-size:1.04rem;line-height:1.5;margin-bottom:.55rem}
.qn{color:var(--green)}
.hint{color:var(--muted);font-size:.9rem;margin:-.25rem 0 .5rem}
.choices{display:grid;gap:.5rem;margin-bottom:.7rem}
.opt{font-weight:400;display:block;cursor:pointer}
.opt input,.sc input{position:absolute;opacity:0}
.opt span{display:block;border:1.5px solid var(--line);border-radius:12px;padding:.65rem .85rem;background:#fff}
.opt input:checked+span{background:var(--sun);border-color:var(--saffron);font-weight:600}
.opt input:focus-visible+span,.sc input:focus-visible+.num{outline:3px solid var(--saffron)}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-bottom:.7rem}
.sc{font-weight:400;text-align:center;cursor:pointer;position:relative}
.sc .num{display:block;border:1.5px solid var(--line);border-radius:12px;padding:.55rem 0;font-weight:700;font-size:1.15rem;background:#fff}
.sc input:checked+.num{background:var(--saffron);border-color:var(--saffron);color:#2B2208}
.sc .lg{display:block;font-size:.72rem;line-height:1.25;color:var(--muted);margin-top:.25rem;overflow-wrap:anywhere}
.q textarea.c{min-height:4rem;margin-top:.2rem}

/* Barre du bas */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:10;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.dock-in{max-width:720px;margin:0 auto;padding:.6rem 1rem;display:flex;gap:.5rem;justify-content:space-between}
.dock .btn{flex:1;padding:.6rem .4rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:5rem;background:var(--ink);color:#fff;padding:.55rem 1rem;border-radius:999px;font-size:.92rem;z-index:20;max-width:92vw;text-align:center}

/* Messages */
.ok{color:var(--green);font-weight:600} .err{color:var(--red);font-weight:600}
.plain .wrap{padding-top:2.5rem}

/* Administration */
.admin-nav{background:var(--green);padding:.6rem 1rem;display:flex;gap:.3rem 1rem;flex-wrap:wrap;align-items:center}
.admin-nav a{color:#fff;text-decoration:none;font-weight:600;padding:.25rem .1rem;border-bottom:2px solid transparent}
.admin-nav a.on{border-color:var(--saffron)} .admin-nav .sp{flex:1}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.85rem;color:var(--muted);font-weight:600}
.badge{display:inline-block;border-radius:999px;padding:.05rem .65rem;font-size:.82rem;font-weight:700;background:var(--sun)}
.badge.final{background:#DCEBDD;color:var(--green-d)} .badge.off{background:#EEE;color:#777}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.row form{display:inline}
.sec-card{border-left:5px solid var(--green)} .sec-card.off{border-left-color:#bbb;background:#FAF8F3}
.qlist{list-style:none;padding:0;margin:.8rem 0 0}
.qlist>li{border-top:1px solid var(--line);padding:.3rem 0}
.qlist li.off>details>summary{color:#999;text-decoration:line-through}
details>summary{cursor:pointer;padding:.35rem 0}
details form{margin:.4rem 0 .6rem}
.answer{white-space:pre-wrap;background:#FBF8F1;border-radius:10px;padding:.6rem .8rem;margin:.25rem 0 .6rem}
.grid2{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:720px){body{font-size:18px}.hero h1{font-size:2.6rem}.grid2{grid-template-columns:1fr 1fr}.dock .btn{flex:0 1 auto;min-width:9rem}.dock-in{justify-content:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}