/* Funnel de création (couche 2), partagé par toutes les pages.
   S'appuie sur les variables (--pink, --purple...) et classes (.card, .btn, .player)
   du design inline de chaque page : l'accent suit automatiquement la page. */
.card.fun{margin-top:20px;box-shadow:0 16px 0 -2px rgba(27,27,47,.10)}
.funh{font-size:22px;font-weight:700;margin-bottom:4px}
.funsub{color:var(--mut2);font-size:15px;font-weight:500;margin-bottom:14px}
.funrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.funrow input{flex:1;min-width:200px;background:#FFF9FB;border:2px solid #E7DDD0;border-radius:14px;font-size:16px;font-weight:500;padding:0 14px;min-height:52px;color:var(--ink)}
.funrow input:focus{outline:none;border-color:var(--pink);background:#fff}
.btn.funbtn{width:auto;min-height:52px;padding:0 22px;margin-top:0;font-size:16px}
.funhint{color:var(--mut2);font-size:13.5px;font-weight:500;margin-top:10px}
.funerr{color:var(--err);font-size:14px;font-weight:600;margin-top:10px;min-height:1.2em}

/* Paroles éditables */
.sec{margin-bottom:14px}
.sectag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--purple);padding:4px 11px;border-radius:99px;margin-bottom:7px;transform:rotate(-2deg)}
.sec textarea{width:100%;background:#FBF8FF;border:2px solid #E4D9FF;border-radius:16px;color:var(--ink);font-size:15px;font-weight:500;line-height:1.7;padding:12px;min-height:74px;resize:vertical}
.sec textarea:focus{outline:none;border-color:var(--purple);background:#fff}

/* Studio */
.prog-emoji{font-size:40px;animation:bob 1.1s ease-in-out infinite}
.prog-track{height:14px;background:#F1ECFB;border-radius:99px;overflow:hidden;margin-top:6px}
#bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint),var(--blue));transition:width .3s linear;border-radius:99px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Résultat */
#players .player{margin-bottom:12px}
.fundl{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--mint-d)}

/* Paywall */
#paywall .pwin{background:var(--sticker);border:3px solid var(--ink);border-radius:22px;padding:22px;margin-top:8px}
#paywall .pwin b{font-size:20px;font-weight:700}
#paywall .pwin p{color:#5A4A1A;font-size:15px;font-weight:500;margin-top:4px}
.pwbtn{margin-top:14px;min-height:54px;padding:0 26px;border:0;border-radius:99px;background:var(--pink);color:#fff;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 6px 0 var(--pink-d);transition:transform .12s,box-shadow .12s}
.pwbtn:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--pink-d)}
.pwbtn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--pink-d)}
#paywall .pwin.done{display:flex;gap:12px;align-items:flex-start;background:#fff}
#paywall .pwin.done p{color:var(--mut)}
#paywall .chk{width:38px;height:38px;flex:none;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}

@media (prefers-reduced-motion:reduce){.prog-emoji,#bar{animation:none;transition:none}}

/* Méga-menu header (desktop) : "Occasions" déroule les 8 pages */
.navdrop{position:relative}
.navdrop>.navtrigger{cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.navdrop .chev{font-size:10px;transition:transform .15s}
.navdrop:hover .chev{transform:rotate(180deg)}
.navdrop::after{content:"";position:absolute;top:100%;left:0;width:100%;height:12px}  /* pont anti-perte de survol */
.navmenu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:0 12px 0 -2px rgba(27,27,47,.12);padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:340px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s;z-index:30}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{opacity:1;visibility:visible;transform:translateY(0)}
.navmenu a{white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--mut3);padding:9px 12px;border-radius:12px}
.navmenu a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
.navmenu a[aria-current="page"]{color:var(--pink)}
@media (max-width:640px){.navdrop .navmenu{display:none!important}}