/* Baromètre citoyen — prototype mobile (identité adrcp.ch : vert officiel, Spectral + Inter) */
:root{
  --paper:#F1F2EC; --surface:#FFFFFF; --soft:#F8FBF5;
  --ink:#15211B; --ink-soft:#44514A; --mute:#717A6F; --line:#DCE0D2; --line-soft:#E9EDDF;
  --accent:#1E9035; --deep:#1B7A30; --tint:#D8EAD9; --tint-2:#EEF6EE;
  --terre:#B5462F; --terre-tint:#F6E6E1;
  --serif:'Spectral', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:6px;
  --ease:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 1px 2px rgba(20,24,28,.05), 0 10px 30px -18px rgba(20,24,28,.28);
  --gut:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern" 1;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-family:var(--serif); font-weight:500; letter-spacing:-.012em; line-height:1.14}
p{margin:0}
button{font:inherit; color:inherit}
svg{display:block}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- barre ---------- */
.bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px var(--gut); padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(241,242,236,.88); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.bar__logo{height:34px; width:auto}
.bar__proto{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--mute);
  border:1px dashed #BFC6B6; border-radius:99px; padding:4px 10px 4px 11px;
}
.bar__proto b{color:var(--deep); font-weight:600; margin-left:2px}

.app{max-width:560px; margin:0 auto; padding:6px var(--gut) 132px}
body:not([data-screen="1"]) .app{padding-bottom:48px}

/* ---------- écrans ---------- */
.scr[hidden]{display:none}
.scr.is-in{animation:in .42s var(--ease) both}
.scr.is-back{animation:back .36s var(--ease) both}
@keyframes in{from{opacity:0; transform:translateX(26px)} to{opacity:1; transform:none}}
@keyframes back{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}

.intro{padding:10px 0 20px}
.step{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--mute); letter-spacing:.01em; margin-bottom:12px}
.step__bars{display:flex; gap:4px}
.step__bars i{width:22px; height:4px; border-radius:2px; background:var(--line)}
.step__bars i.on{background:var(--accent)}
.intro h1{font-size:clamp(32px, 9vw, 40px); margin-bottom:10px}
.intro h1:focus{outline:none}
.lead{font-size:17px; line-height:1.5; color:var(--ink)}
.sub{font-size:14.5px; color:var(--ink-soft); margin-top:8px}

.q{font-size:21px; line-height:1.28; margin:4px 0 6px}
.q__help{font-size:13.5px; color:var(--mute); margin-bottom:2px}
.mech{margin-top:14px}

.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  box-shadow:var(--shadow); padding:18px 16px;
}
.num{
  flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--tint-2); color:var(--deep); font:600 12px/1 var(--sans);
  transition:background .25s, color .25s;
}

/* ---------- A : échelle ---------- */
fieldset{margin:0; min-width:0}
.qa{border:1px solid var(--line-soft); margin-bottom:12px; transition:border-color .25s, box-shadow .25s}
.qa__h{display:flex; align-items:center; gap:10px; padding:0; float:left; width:100%}
.qa__h + *{clear:both}
.qa__t{font:600 16.5px/1.25 var(--sans)}
.qa__q{font-size:14px; color:var(--ink-soft); margin:8px 0 12px; line-height:1.45}
.qa__val{font:italic 500 18px/1.2 var(--serif); color:var(--mute); margin-bottom:10px; min-height:22px; transition:color .2s}
.qa__val:not(.is-set){font:400 13px/22px var(--sans); color:#9AA294}
.qa__val.is-set{color:var(--deep)}
.qa.is-done .num{background:var(--accent); color:#fff}
.qa.is-miss{border-color:var(--terre); box-shadow:0 0 0 3px var(--terre-tint)}

.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; height:64px; align-items:end}
.scale__o{position:relative; height:100%; display:flex; align-items:flex-end; cursor:pointer}
.scale__o input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.scale__bar{
  width:100%; height:calc(28% + var(--k) * 18%); border-radius:4px 4px 2px 2px;
  background:var(--line-soft); border:1px solid var(--line);
  transition:background .28s var(--ease), border-color .28s, transform .35s var(--spring);
  transform-origin:bottom;
}
.scale__o:active .scale__bar{transform:scaleY(.94)}
.scale__o input:focus-visible + .scale__bar{outline:2px solid var(--accent); outline-offset:2px}
/* remplissage jusqu'au niveau choisi (--v = 1..5) */
.qa[data-v="1"] .scale__o:nth-child(-n+1) .scale__bar,
.qa[data-v="2"] .scale__o:nth-child(-n+2) .scale__bar,
.qa[data-v="3"] .scale__o:nth-child(-n+3) .scale__bar,
.qa[data-v="4"] .scale__o:nth-child(-n+4) .scale__bar,
.qa[data-v="5"] .scale__o:nth-child(-n+5) .scale__bar{background:#B9DDBF; border-color:#B9DDBF}
.scale__o input:checked + .scale__bar{background:var(--accent); border-color:var(--accent); animation:pop .38s var(--spring)}
@keyframes pop{0%{transform:scaleY(.8)} 100%{transform:none}}
.scale__ends{display:flex; justify-content:space-between; font-size:11.5px; color:var(--mute); margin-top:7px; letter-spacing:.01em}

/* ---------- B : 20 points ---------- */
.pts-list{padding:4px 16px}
.pts{padding:14px 0; border-bottom:1px solid var(--line-soft)}
.pts:last-child{border-bottom:0}
.pts__h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.pts__t{font:600 15.5px/1.3 var(--sans)}
.pts__v{font:500 26px/1 var(--serif); color:#B8BEB2; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; transition:color .2s}
.pts.is-set .pts__v{color:var(--c)}
.pts__ctl{display:grid; grid-template-columns:44px 1fr 44px; gap:10px; align-items:center}
.pts__btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--soft);
  display:grid; place-items:center; cursor:pointer; touch-action:manipulation; user-select:none; -webkit-user-select:none;
  transition:transform .15s, background .2s, border-color .2s, opacity .2s;
}
.pts__btn svg{width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round}
.pts__btn--plus{background:var(--c); border-color:var(--c)}
.pts__btn--plus svg{stroke:#fff}
.pts__btn:active{transform:scale(.9)}
.pts__btn:disabled{opacity:.35; cursor:default}
.pts__track{
  display:grid; grid-template-columns:repeat(20,1fr); gap:2px; height:30px; align-items:center;
  cursor:pointer; touch-action:pan-y; padding:4px 0; border-radius:4px;
}
.pts__track i{height:14px; border-radius:2px; background:var(--line-soft); transition:background .18s, height .25s var(--spring)}
.pts__track i:nth-child(5n){margin-right:2px}
.pts__track i.on{background:var(--c); height:22px}

/* ---------- C : top 3 ---------- */
.podium{list-style:none; margin:0 0 12px; padding:6px 14px; transition:box-shadow .25s, border-color .25s}
.podium.is-miss{border-color:var(--terre); box-shadow:0 0 0 3px var(--terre-tint)}
.slot{display:flex; align-items:center; gap:12px; padding:10px 0; min-height:62px; border-bottom:1px dashed var(--line)}
.slot:last-child{border-bottom:0}
.slot__n{
  flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font:500 18px/1 var(--serif); color:#A7AEA2; border:1.5px dashed #C7CDBF;
  transition:all .3s var(--spring);
}
.slot.is-full .slot__n{background:var(--deep); border:1.5px solid var(--deep); color:#fff}
.slot.is-next .slot__n{border-color:var(--accent); color:var(--accent); animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 5px rgba(30,144,53,.14)}}
.slot__b{flex:1; min-width:0}
.slot__k{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--mute)}
.slot__t{display:block; font:500 16px/1.3 var(--sans); color:#A7AEA2; margin-top:1px}
.slot.is-full .slot__t{color:var(--ink); font-weight:600}
.slot.is-next .slot__t{font-weight:400; font-size:14px}
.slot__act{display:flex; gap:4px; opacity:0; pointer-events:none; transition:opacity .2s}
.slot.is-full .slot__act{opacity:1; pointer-events:auto}
.ico{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--soft); display:grid; place-items:center; cursor:pointer}
.ico svg{width:17px; height:17px; fill:none; stroke:var(--ink-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ico:active{transform:scale(.9)}
.hint{font-size:13.5px; color:var(--ink-soft); margin:0 2px 10px}
.picks{display:grid; gap:8px}
.pick{
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:12px 14px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  font:500 15.5px/1.3 var(--sans); box-shadow:0 1px 2px rgba(20,24,28,.04);
  transition:border-color .2s, background .2s, opacity .2s, transform .15s;
}
.pick:active{transform:scale(.985)}
.pick__r{
  flex:none; width:28px; height:28px; border-radius:50%; border:1.5px solid #C7CDBF; display:grid; place-items:center;
  font:600 14px/1 var(--sans); color:#fff; transition:all .28s var(--spring);
}
.pick[aria-pressed="true"]{border-color:var(--deep); background:var(--tint-2)}
.pick[aria-pressed="true"] .pick__r{background:var(--deep); border-color:var(--deep); transform:scale(1.08)}
.pick.is-off{opacity:.45}

/* ---------- commentaire ---------- */
.note{margin-top:22px}
.note label{display:block; margin-bottom:12px}
.note__h{display:block; font:500 19px/1.25 var(--serif)}
.note__p{display:block; font-size:14px; color:var(--ink-soft); margin-top:6px}
textarea, .fld input, .tile__in input{
  width:100%; font:16px/1.45 var(--sans); color:var(--ink);
  background:var(--soft); border:1px solid var(--line); border-radius:4px; padding:12px 13px;
  transition:border-color .2s, box-shadow .2s, background .2s; appearance:none; -webkit-appearance:none;
}
textarea{resize:vertical; min-height:108px}
textarea:focus, .fld input:focus, .tile__in input:focus{outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(30,144,53,.14)}
.note__meta{display:flex; justify-content:space-between; font-size:12px; color:var(--mute); margin-top:6px}

/* ---------- action ---------- */
.go{margin-top:22px}
.go__err{font-size:14px; color:var(--terre); font-weight:500; min-height:0; margin-bottom:10px}
.go__err:empty{display:none}
.btn{
  position:relative; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:58px;
  padding:14px 20px; border:0; border-radius:4px; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--deep); color:#fff; font:600 17px/1.25 var(--sans); letter-spacing:.005em;
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 12px 26px -14px rgba(27,122,48,.7);
  transition:transform .15s, background .2s, box-shadow .2s; touch-action:manipulation;
}
.btn svg{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.btn:active{transform:scale(.985)}
.btn:hover svg{transform:translateX(3px)}
.btn--support{background:var(--accent)}
.btn.is-busy{color:transparent}
.btn.is-busy svg{opacity:0}
.btn.is-busy::after{content:""; position:absolute; width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn--ghost{background:transparent; color:var(--deep); border:1.5px solid var(--deep); box-shadow:none}

.is-flash{animation:flash .5s var(--ease)}
@keyframes flash{0%{transform:none} 25%{transform:translateX(-5px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-2px)} 100%{transform:none}}
.btn.is-flash{animation:bump .35s var(--spring)}
@keyframes bump{0%{transform:scale(.97)} 100%{transform:none}}

/* ---------- dock (écran 1) ---------- */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  padding:12px var(--gut); padding-bottom:calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px -20px rgba(20,24,28,.35);
  transition:transform .35s var(--ease), background .3s;
}
body:not([data-screen="1"]) .dock{transform:translateY(110%); visibility:hidden; transition:transform .35s var(--ease), visibility 0s .35s}
.dock__row{max-width:528px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px}
.dock__txt{font-size:14.5px; color:var(--ink-soft)}
.dock__n{font:600 17px/1 var(--sans); color:var(--ink); font-variant-numeric:tabular-nums}
.dock__of{font-size:12.5px; color:var(--mute)}
.dots{display:flex; gap:5px}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--line); transition:background .25s, transform .3s var(--spring)}
.dots i.on{background:var(--accent); transform:scale(1.1)}
.dock.is-ok{background:rgba(238,246,238,.96)}
.dock.is-ok .dock__n{color:var(--deep)}
.dock--b .dock__n{font:500 28px/1 var(--serif); margin-right:2px}
.dock--b.is-ok .dock__txt::after{content:" ✓"; color:var(--deep); font-weight:600}
.gauge{max-width:528px; margin:9px auto 0; display:grid; grid-template-columns:repeat(20,1fr); gap:2px}
.gauge i{height:8px; border-radius:2px; background:var(--line-soft); transition:background .2s}
.gauge i:nth-child(5n){margin-right:2px}

/* ---------- écran 2 ---------- */
.blk{margin-bottom:14px; padding-top:16px}
.blk__h{display:flex; align-items:center; gap:9px; float:left; width:100%; padding:0; font:500 20px/1.2 var(--serif); margin-bottom:14px}
.blk__h + *{clear:both}
.blk__p{font-size:14.5px; color:var(--ink-soft); margin-bottom:14px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.grid-cp{max-width:48%}
.fld{margin-bottom:14px}
.fld label{display:block; font-size:13.5px; font-weight:500; color:var(--ink-soft); margin-bottom:6px}
.star{color:var(--accent)}
.fld.is-err input{border-color:var(--terre); background:#FFF9F7}
.f-err{font-size:13px; color:var(--terre); margin-top:6px}
.f-err:empty{display:none}
.req{font-size:12px; color:var(--mute); margin:-4px 0 16px}
.req span{color:var(--accent)}

.check{display:flex; gap:12px; align-items:flex-start; cursor:pointer; padding:14px; margin:0 -2px; border-radius:var(--r); background:var(--soft); border:1px solid var(--line-soft)}
.check input{position:absolute; opacity:0; pointer-events:none}
.check__box{flex:none; width:24px; height:24px; border-radius:4px; border:1.5px solid #B7BFB0; background:#fff; display:grid; place-items:center; transition:all .2s}
.check__box svg{width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:24; stroke-dashoffset:24; transition:stroke-dashoffset .3s var(--ease) .05s}
.check input:checked + .check__box{background:var(--accent); border-color:var(--accent)}
.check input:checked + .check__box svg{stroke-dashoffset:0}
.check input:focus-visible + .check__box{outline:2px solid var(--accent); outline-offset:2px}
.check__t{font-size:14.5px; line-height:1.45}

/* bloc soutien financier : bien identifiable */
.blk--don{background:linear-gradient(180deg, #F3F9F2 0%, #FFFFFF 70%); border-color:#CFE3CF; position:relative; overflow:hidden}
.blk--don::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.blk__ico{width:32px; height:32px; border-radius:50%; background:var(--tint); display:grid; place-items:center}
.blk__ico svg{width:17px; height:17px; fill:var(--deep)}
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:2px; min-height:78px;
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff; cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s, transform .15s;
}
.tile:active{transform:scale(.985)}
.tile > input{position:absolute; opacity:0; pointer-events:none}
.tile__a{font:500 22px/1.1 var(--serif); color:var(--ink)}
.tile__l{font-size:13px; color:var(--ink-soft); line-height:1.35}
.tile.is-on{border-color:var(--deep); background:var(--tint-2); box-shadow:0 0 0 1px var(--deep) inset}
.tile:has(> input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.tile > input:checked ~ .tile__a{color:var(--deep)}
.tile::after{
  content:""; position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%;
  border:1.5px solid #C4CBBD; background:#fff; transition:all .2s;
}
.tile.is-on::after{border:5.5px solid var(--deep)}
.tile--autre{grid-column:1 / -1; min-height:62px}
.tile--autre .tile__a{font-size:19px}
.tile__in{display:none; align-items:center; gap:8px; margin-top:8px}
.tile__in span{font-weight:600; color:var(--ink-soft)}
.tile__in input{max-width:160px; font-size:18px; font-variant-numeric:tabular-nums; background:#fff}
.tile--autre.is-open .tile__in{display:flex; animation:in .3s var(--ease)}
.tile--none{grid-column:1 / -1; min-height:56px}
.tile--none .tile__l{font-size:14.5px; color:var(--ink); padding-right:26px}
.blk--don.is-err{border-color:var(--terre)}

.choice{
  display:flex; gap:13px; align-items:flex-start; padding:15px 14px; border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; margin-bottom:10px; transition:border-color .2s, background .2s, box-shadow .2s;
}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice__dot{flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid #B7BFB0; margin-top:1px; transition:all .2s; background:#fff}
.choice input:checked + .choice__dot{border:6.5px solid var(--deep)}
.choice input:focus-visible + .choice__dot{outline:2px solid var(--accent); outline-offset:2px}
.choice.is-on{border-color:var(--deep); background:var(--tint-2); box-shadow:0 0 0 1px var(--deep) inset}
.choice__t{display:block; font:600 16px/1.3 var(--sans)}
.choice__s{display:block; font-size:13px; color:var(--ink-soft); margin-top:3px}
.choice:first-of-type .choice__t{font:500 20px/1.2 var(--serif)}
.blk__note{font-size:13px; color:var(--deep); background:var(--tint-2); border-radius:4px; padding:9px 11px; margin-bottom:6px}
#soutien.is-err .choice{border-color:#E4B9AE}

.legal{font-size:12.5px; color:var(--mute); margin-top:12px; text-align:center; line-height:1.5}
.legal a{color:var(--ink-soft)}
.back{
  display:flex; align-items:center; gap:8px; margin:22px auto 0; padding:10px 12px; background:none; border:0;
  color:var(--ink-soft); font-size:14.5px; cursor:pointer;
}
.back svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- écran 3 ---------- */
.intro--done{padding-top:26px}
.done{width:64px; height:64px; margin-bottom:18px}
.done svg{width:64px; height:64px; fill:none; stroke-linecap:round; stroke-linejoin:round}
.done circle{stroke:var(--tint); stroke-width:3; fill:var(--tint-2)}
.done path{stroke:var(--accent); stroke-width:3.4; stroke-dasharray:36; stroke-dashoffset:36; animation:draw .55s var(--ease) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.scr--3 .sub b{color:var(--ink); font-weight:600; word-break:break-all}

.pay{margin-top:4px; border-color:#CFE3CF; position:relative; overflow:hidden}
.pay::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent)}
.pay__k{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--deep); font-weight:600; margin-bottom:6px}
.pay h2{font-size:23px; margin-bottom:8px}
.pay > p{font-size:14.5px; color:var(--ink-soft)}
.pay__rows{margin:14px 0 0}
.pay__rows div{padding:10px 0; border-top:1px solid var(--line-soft)}
.pay__rows dt{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:2px}
.pay__rows dd{margin:0; font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.copy{border:1px solid var(--deep); color:var(--deep); background:#fff; border-radius:99px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer}
.copy.is-ok{background:var(--deep); color:#fff}
.pay__qr{display:flex; gap:14px; align-items:center; margin:12px 0 0; padding-top:14px; border-top:1px solid var(--line-soft)}
.pay__qr img{width:104px; height:104px; flex:none; border:1px solid var(--line-soft)}
.pay__qr figcaption{font-size:12.5px; color:var(--mute)}
.pay__law{font-size:12px !important; color:var(--mute) !important; margin-top:14px}

.rec{margin-top:18px; border:1.5px dashed #BFC6B6; border-radius:var(--r); padding:0 14px; background:rgba(255,255,255,.5)}
.rec summary{cursor:pointer; padding:14px 0; font-size:13.5px; font-weight:600; color:var(--ink-soft); list-style:none; display:flex; justify-content:space-between}
.rec summary::after{content:"+"; font-size:18px; line-height:1; color:var(--mute)}
.rec[open] summary::after{content:"–"}
.rec summary::-webkit-details-marker{display:none}
.rec__warn{font-size:12.5px; color:var(--terre); margin-bottom:10px}
.rec__cat{display:inline-block; font-size:12.5px; font-weight:600; color:#fff; background:var(--deep); border-radius:99px; padding:4px 11px; margin-bottom:6px}
.rec h3{font:600 11.5px/1.3 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--mute); margin:14px 0 4px}
.rec dl{margin:0 0 4px}
.rec dl div{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line-soft); font-size:13.5px}
.rec dt{color:var(--ink-soft)}
.rec dd{margin:0; text-align:right; font-weight:500; overflow-wrap:anywhere}
.rec dl:last-of-type{margin-bottom:14px}
.go--end{display:grid; gap:10px; margin-top:22px}
.restart{text-align:center; font-size:13.5px; color:var(--mute); padding:8px}

@media (min-width:600px){
  :root{--gut:24px}
  .app{padding-top:18px}
}
@media (max-width:360px){
  .grid2{grid-template-columns:1fr; gap:0}
  .grid-cp{max-width:none}
  .tiles{grid-template-columns:1fr}
  .scale{gap:4px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ---------- version finale (octobre 2026) : 3 étapes ---------- */
.opt{font-weight:400; color:var(--mute)}
.yn{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.yn .choice{margin-bottom:0; align-items:center; min-height:60px}
.yn .choice__t, .yn .choice:first-of-type .choice__t{font:500 20px/1.2 var(--serif)}
#utile.is-err .choice{border-color:#E4B9AE}
.blk--don{padding-top:18px}

/* paiement depuis le même téléphone : enregistrer le QR-facture puis l'importer dans l'app bancaire */
.pay__mobile{margin-top:14px; padding:12px 14px; background:var(--tint-2); border-radius:var(--r); font-size:14px; color:var(--ink-soft)}
.pay__mobile b{color:var(--ink)}
.pay__mobile .btn{margin-top:10px; min-height:48px; font-size:15px}