.topbar{background:var(--nuit);color:#EDE3F0;text-align:center;font-size:13px;padding:7px 12px}
.ctop{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--papier);padding-top:12px}
.ctop-in{max-width:740px;margin:0 auto;padding-inline:20px;display:grid;gap:8px}
.back-link{justify-self:start;border:0;background:none;color:var(--gris);font:500 14px var(--body);cursor:pointer;padding:0}
.cstep{display:flex;justify-content:space-between;align-items:baseline}
.cstep em{font-family:var(--display);font-style:italic;color:var(--bordeaux);font-size:19px}
.cstep .pct{color:var(--gris);font-size:16px}
.track{position:relative;height:3px;background:var(--ligne);border-radius:9px;margin-bottom:6px}
#prog{height:100%;width:17%;background:var(--bordeaux);border-radius:9px;transition:width .4s cubic-bezier(.23,1,.32,1)}
#knob{position:absolute;top:50%;left:17%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--papier);border:3px solid var(--bordeaux);transition:left .4s cubic-bezier(.23,1,.32,1)}
.cmain{max-width:720px;margin:0 auto;padding-inline:20px;padding-block:22px 70px}
.scr{animation:stepin .4s cubic-bezier(.23,1,.32,1)}
.scr.center{text-align:center;max-width:460px;margin:0 auto}
@keyframes stepin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.private{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:#3F6B4C;background:#E4F0E2;border:1px solid #C9DFC6;border-radius:999px;padding:6px 14px;margin:6px 0 18px}
.cmain h1{font-size:clamp(32px,5.4vw,48px)}
.scr.center h1{font-size:clamp(28px,4.6vw,36px)}
.csub{color:var(--gris);font-size:16px;margin:10px 0 24px}
.q{font-weight:700;font-size:18px;margin:0 0 12px}
.q.serif,.serif{font-family:var(--display);font-style:italic;font-weight:700}
.q.serif{font-size:22px;display:flex;align-items:center;gap:10px}
.opt{font:600 10px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--gris);border:1px solid var(--ligne);border-radius:6px;padding:3px 7px;font-style:normal}
.hint{color:var(--gris);font-size:14px;margin:-4px 0 14px}
.cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gris);margin:18px 0 8px}
.cap.left{text-align:left}
.grid2,.grid3{display:grid;gap:10px}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:repeat(3,1fr)}
.grid2 .wide{grid-column:1/-1}
.grid2 button,.grid3 button{font:500 16px var(--body);color:var(--encre);background:#fff;border:1.5px solid var(--ligne);border-radius:14px;padding:16px 20px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:background .15s,border-color .15s,transform .12s}
.grid3 button{justify-content:center;text-align:center;padding:16px 10px}
.grid2 button:active,.grid3 button:active{transform:scale(.97)}
.grid2 button[aria-pressed="true"],.grid3 button[aria-pressed="true"]{background:var(--bordeaux);border-color:var(--bordeaux);color:#fff;box-shadow:0 8px 20px -10px rgba(140,47,75,.6)}
.badge{font:700 10px var(--body);letter-spacing:.08em;text-transform:uppercase;background:var(--rose2);color:var(--bordeaux);border-radius:999px;padding:4px 9px}
button[aria-pressed="true"] .badge{background:rgba(255,255,255,.9)}
.badge.amber{background:#FDF1D8;color:#8A5A00}
hr{border:0;border-top:1px solid var(--ligne);margin:28px 0 22px}
.namebox{position:relative}
.namebox input{font-family:var(--display);font-size:24px;padding:18px 56px 18px 20px;background:#fff}
.ok{position:absolute;right:16px;top:50%;margin-top:-13px;width:26px;height:26px;border-radius:50%;background:#3F7A55;display:grid;place-items:center}
.namebox input.valid{border-color:#3F7A55}
.add{border:0;background:none;color:var(--encre);font:500 15px var(--body);cursor:pointer;padding:14px 0;display:flex;gap:10px;align-items:center}
input,textarea{width:100%;font:inherit;padding:14px 16px;border:1.5px solid var(--ligne);border-radius:14px;background:#fff;color:var(--encre)}
textarea{resize:vertical;line-height:1.5}
textarea.filled{border-color:#3F7A55}
.ideas{display:grid;gap:8px}
.ideas button{text-align:left;font:italic 500 17px var(--display);color:var(--gris);background:#fff;border:1.5px solid var(--ligne);border-radius:14px;padding:13px 16px;cursor:pointer;display:flex;gap:12px;align-items:center}
.ideas button::before{content:"+";flex:none;width:22px;height:22px;border-radius:50%;background:var(--bordeaux);color:#fff;font:700 16px/22px var(--body);text-align:center;font-style:normal}
.ideas button.used{opacity:.55}
.ideas button.used::before{background:#8FB59A}
.nav{display:flex;justify-content:flex-end;gap:12px;margin-top:26px}
.btn.big{padding:18px 30px;font-size:18px;border-radius:16px;min-width:220px;background:linear-gradient(180deg,#A23A5A,var(--bordeaux));box-shadow:0 14px 30px -12px rgba(140,47,75,.55)}
.btn.ghost{border-radius:16px}
.nav.first{justify-content:center}
.nav.first #next{min-width:min(420px,100%)}
.card{background:#fff;border:1px solid var(--ligne);border-radius:20px;padding:22px;margin:0 0 14px;text-align:left}
.card-t{font-family:var(--display);font-size:22px;margin:0 0 6px}
.card-t.center{text-align:center}
.card .btn.big{width:100%;margin-top:12px}
.card-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-weight:700;font-size:17px;border-bottom:1px solid var(--ligne);padding-bottom:10px}
.link{border:0;background:none;color:var(--bordeaux);font:500 13px var(--body);cursor:pointer;padding:0}
dl{margin:0}
dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--ligne);font-size:14px}
dl div.col{display:block}
dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:700}
dd{margin:0;text-align:right}
dl div.col dd{text-align:left;margin-top:6px;white-space:pre-line}
.chipline{display:flex;flex-wrap:wrap;gap:6px}
.chipline span{background:var(--rose2);color:var(--bordeaux);border-radius:999px;padding:3px 10px;font-size:13px}
.accent{color:var(--bordeaux)}
.note{background:var(--rose2);border:1px solid var(--rose);border-radius:10px;padding:10px 12px;font-size:13px;margin:10px 0}
.mini-player{display:flex;gap:14px;align-items:center;background:var(--rose2);border-radius:14px;padding:14px}
.play.sm{width:42px;height:42px;background:var(--bordeaux);color:#fff}
.row-c{display:flex;gap:16px;align-items:center}
.vinyl{flex:none;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,var(--or) 0 18%,#1d1726 19% 100%);box-shadow:inset 0 0 0 6px #2b2336}
.up{display:flex;gap:12px;background:#fff;border:1.5px solid var(--ligne);border-radius:18px;padding:18px;margin-bottom:12px;cursor:pointer;text-align:left}
.up.on{border-color:var(--bordeaux);box-shadow:0 0 0 1px var(--bordeaux)}
.up input{width:20px;height:20px;margin-top:2px;accent-color:var(--bordeaux);flex:none}
.up-body{display:grid;gap:6px;flex:1}
.up-top{display:flex;justify-content:space-between;align-items:center}
.up-t{font-size:22px}
.price{color:var(--bordeaux);font-variant-numeric:tabular-nums}
.ck{display:grid;padding-left:26px;position:relative;font-size:14px}
.ck::before{content:"✓";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:#E4F0E2;color:#3F7A55;font-size:11px;display:grid;place-items:center}
.ck small{color:var(--gris)}
.line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--ligne);font-size:15px;font-variant-numeric:tabular-nums}
.line.total{font-size:20px;border:0}
.legal{display:flex;gap:10px;font-size:13px;color:var(--gris);margin:8px 0 0;text-align:left}
.legal input{width:18px;height:18px;flex:none;accent-color:var(--bordeaux);margin-top:2px}
.secure{text-align:center;font-size:13px;margin:10px 0 0}
@media (max-width:560px){.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.btn.big{min-width:0;flex:1}}
@media (prefers-reduced-motion:reduce){.scr{animation:none}#prog,#knob{transition:none}}
/* thème amour : bandeau et cartes sélectionnées en bordeaux à cœurs */
.topbar{background:#4E1528;color:#FBE3EA}
.grid2 button[aria-pressed="true"],.grid3 button[aria-pressed="true"],.up.on{background-color:#8C2F4B;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 160 160'%3E%3Cg fill='%23F4C7D3'%3E%3Cpath opacity='.18' transform='translate(14 18) rotate(-14 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.12' transform='translate(110 70) scale(.7) rotate(12 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.1' transform='translate(50 110) scale(.5)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/g%3E%3C/svg%3E")}
.up.on{color:#fff}.up.on .muted,.up.on small{color:#F6D3DD}.up.on .price{color:#fff}.up.on .ck::before{background:rgba(255,255,255,.2);color:#fff}.up.on .badge{background:#fff}