/* Passage 14 — DÉFI : CSS des maquettes validées REFERENCE-VALIDEE/ecrans/defi-*.html repris TELS QUELS.
   Base commune (rejoindre, salle, podium) puis, scopés par écran : salle invité (.att2), podium (.e-podium), question (.e-question, fond crème). */
*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:radial-gradient(70% 40% at 50% 18%,#2b6a50,#173B2C 55%,#0f2a20);color:#f4f1e6;min-height:100vh;display:flex;justify-content:center}
.app{width:100%;max-width:430px;min-height:100vh;padding:16px 20px 20px;display:flex;flex-direction:column}
.haut{display:flex;align-items:center;gap:10px}.x{width:40px;height:40px;border-radius:50%;background:rgba(244,241,230,.1);display:grid;place-items:center;font:900 18px Nunito}
.tag{font:800 12px Nunito;letter-spacing:.12em;text-transform:uppercase;color:#a6e36f}
h1{font:700 36px/1 Kalam;color:#FFD24A;text-align:center;margin-top:8px}
.sw{display:block;margin:2px auto 0}
.med{width:46px;height:46px;border-radius:50%;padding:3px;background:#bfe48f;flex:none}.med img{width:100%;height:100%;border-radius:50%}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;border-radius:20px;padding:15px;font:900 19px Nunito;color:#173B2C;background:linear-gradient(180deg,#c3ec96,#a6e36f);border:2px solid #8cc957;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.btn2{display:block;width:100%;margin-top:10px;text-align:center;border-radius:18px;padding:13px;font:900 16px Nunito;color:#fff;background:linear-gradient(180deg,#8a7cf0,#7768E8);box-shadow:0 5px 0 #5446c4}
.code{margin-top:14px;text-align:center}.code small{font:700 12px Inter;opacity:.7;text-transform:uppercase;letter-spacing:.1em}.code b{display:block;font:900 40px Nunito;letter-spacing:.12em;color:#fff;margin-top:2px}
.lien{display:flex;align-items:center;gap:8px;margin-top:10px;background:rgba(244,241,230,.08);border:1.5px dashed rgba(244,241,230,.3);border-radius:14px;padding:10px 12px;font:700 13.5px Inter}.lien span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.85}.lien a{font:900 13px Nunito;background:#f4f1e6;color:#173B2C;border-radius:999px;padding:6px 12px}
.parts{display:flex;gap:8px;margin-top:10px}.parts a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:14px;padding:10px;font:800 14px Nunito;background:rgba(244,241,230,.1);border:1.5px solid rgba(244,241,230,.2)}
.salle{margin-top:12px;border-radius:18px;background:rgba(0,0,0,.18);border:1.5px solid rgba(244,241,230,.14);padding:10px 12px}.salle h3{display:flex;justify-content:space-between;font:900 15px Nunito;margin-bottom:6px}.salle h3 span{color:#a6e36f}
.p{display:flex;align-items:center;gap:10px;padding:5px 0;animation:arr .5s cubic-bezier(.3,1.4,.5,1) both}.p+.p{border-top:1px dashed rgba(244,241,230,.14)}@keyframes arr{from{opacity:0;transform:translateX(-14px) scale(.9)}}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:900 16px Nunito;color:#173B2C;flex:none}.nm{flex:1;font:800 15px Nunito}.nm small{display:block;font:600 12px Inter;opacity:.65}
.att .nm{opacity:.7;font-weight:700}.dots i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#f4f1e6;margin-left:3px;animation:dt 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}@keyframes dt{50%{opacity:.2}}
.regle{display:flex;justify-content:center;gap:14px;margin-top:12px;font:700 12.5px Inter;opacity:.8}
@media (prefers-reduced-motion:reduce){.p,.dots i{animation:none}}
.av{overflow:hidden;padding:0!important;background:none}.av svg{display:block}.mini span{overflow:hidden;background:none!important}.tps{margin-top:12px;background:rgba(0,0,0,.18);border:1.5px solid rgba(244,241,230,.14);border-radius:16px;padding:10px 14px}.tps .tl{display:flex;justify-content:space-between;font:800 14px Nunito}.tps b{color:#FFD24A;font:900 16px Nunito}.tps input{width:100%;margin-top:8px;accent-color:#a6e36f;height:24px}.tps .tm{display:flex;justify-content:space-between;font:600 11.5px Inter;opacity:.6}
.ed{width:30px;height:30px;border-radius:50%;background:rgba(244,241,230,.12);display:grid;place-items:center;margin-right:4px}
.jg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}.ch{aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid transparent;opacity:.85}.ch.on{border-color:#FFD24A;box-shadow:0 0 0 4px rgba(255,210,74,.3);opacity:1}.ch svg{display:block}
.inp{margin-top:16px}.inp label{font:800 14px Nunito}.inp div{margin-top:6px;background:#fff;color:#173B2C;border-radius:14px;padding:13px 14px;font:800 17px Nunito;display:flex;justify-content:space-between;align-items:center}.inp small{font:600 12px Inter;color:#7a776d}
.big{display:flex;flex-direction:column;align-items:center;margin-top:12px}.big .a{width:92px;height:92px;border-radius:50%;overflow:hidden;border:4px solid #FFD24A}.big b{font:900 20px Nunito;margin-top:6px}
.inv{margin-top:12px;text-align:center;font:600 14px Inter;opacity:.85}
.plus{display:grid;place-items:center;background:rgba(244,241,230,.1);border:2.5px dashed rgba(244,241,230,.45)!important;color:#f4f1e6;font:900 18px Nunito;cursor:pointer;opacity:1}#more{margin-top:12px}.app{min-height:100vh;height:auto}
.promo{display:block;margin-top:14px;border-radius:16px;background:rgba(244,241,230,.08);border:1.5px solid rgba(244,241,230,.2);padding:10px 14px;font:600 13px Inter}.promo b{display:block;font:900 14.5px Nunito;color:#FFD24A}.promo i{font-style:normal;font:900 13px Nunito;color:#a6e36f}.cx{margin-top:10px;text-align:center;font:700 13.5px Inter;opacity:.85}.cx a{color:#a6e36f;font-weight:800}
/* defi-salle-invite.html */
.att2{background:rgba(244,241,230,.1)!important;border:2px solid rgba(244,241,230,.2)!important;color:rgba(244,241,230,.75)!important;box-shadow:none!important;font-size:16px!important}.sp{width:18px;height:18px;border-radius:50%;border:3px solid rgba(244,241,230,.3);border-top-color:#a6e36f;animation:rot 1s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}
/* defi-podium.html (scopé .e-podium) */
.e-podium .pod{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-top:26px}.e-podium .pd{display:flex;flex-direction:column;align-items:center;width:96px}.e-podium .pd .av{width:52px;height:52px;font-size:22px;border:3px solid #173B2C;box-shadow:0 0 0 3px rgba(255,210,74,.5)}.e-podium .pd b{font:900 15px Nunito;margin-top:6px}.e-podium .pd small{font:700 12.5px Inter;opacity:.8}
.e-podium .mar{width:100%;margin-top:8px;border-radius:12px 12px 0 0;display:grid;place-items:start center;padding-top:8px;font:900 30px Nunito;color:#173B2C}
.e-podium .cl{margin-top:16px;border-radius:16px;background:rgba(0,0,0,.18);border:1.5px solid rgba(244,241,230,.14);padding:4px 12px}.e-podium .cl .p{display:flex;align-items:center;gap:10px;padding:8px 0}.e-podium .cl .p+.p{border-top:1px dashed rgba(244,241,230,.14)}.e-podium .cl .n{width:22px;font:900 15px Nunito;opacity:.7}.e-podium .cl .s{margin-left:auto;font:900 15px Nunito;color:#FFD24A}
.e-podium .zm{display:flex;gap:10px;align-items:center;margin-top:14px;font:700 17px/1.3 Kalam}
.e-podium .av{border-radius:50%;display:grid;place-items:center;font:900 16px Nunito;color:#173B2C;width:30px;height:30px;flex:none}
.e-podium .pd .av{width:52px;height:52px}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}.conf i{position:absolute;top:-20px;width:7px;height:11px;border-radius:2px;animation:tb linear forwards}@keyframes tb{to{transform:translateY(110vh) rotate(540deg);opacity:0}}
/* defi-question.html (scopé .e-question : fond CRÈME, fondateur 14/11 5h35) */
.e-question .top2{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font:800 14px Nunito}.e-question .ring{position:relative;width:62px;height:62px}.e-question .ring b{position:absolute;inset:0;display:grid;place-items:center;font:900 22px Nunito}
.e-question .qb{margin-top:12px;border-radius:12px;background:linear-gradient(160deg,#1f4a3a,#163a2d 60%,#123227);border:8px solid #c98a44;box-shadow:inset 0 0 0 2px #9c6127;padding:12px 14px;font-family:Kalam;display:flex;gap:12px;align-items:center}
.e-question .qb p{font-size:19px;line-height:1.25}.e-question .qb b{color:#FFD24A}
.e-question .reps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.e-question .r{border-radius:18px;min-height:150px;padding:12px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 5px 0 rgba(0,0,0,.25)}.e-question .r b{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.25);display:grid;place-items:center;font:900 16px Nunito}.e-question .r span{font:900 26px Nunito;color:#fff}
.e-question .rep2{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font:700 13.5px Inter;opacity:.85}.e-question .mini{display:flex}.e-question .mini span{width:24px;height:24px;border-radius:50%;margin-left:-6px;border:2px solid #173B2C;display:grid;place-items:center;font:900 11px Nunito;color:#173B2C}
body.e-question{background:radial-gradient(70% 40% at 50% 30%,#fff6e6 0,transparent 70%),linear-gradient(180deg,#faf4e7,#f6efdf)!important;color:#173B2C!important}
.e-question .tag{color:#2f7d32!important}.e-question .haut span[style],.e-question .haut .qn{color:#5d675f}.e-question .top2{color:#173B2C}.e-question .ring circle:first-child{stroke:#e6dcc6}.e-question .ring b{color:#173B2C}
.e-question .qb{box-shadow:inset 0 0 0 2px #9c6127,0 14px 24px rgba(60,40,10,.22)!important;color:#f4f1e6}.e-question .rep2{color:#4a5550}.e-question .mini span{border-color:#f6efdf!important}
.e-question .astuce-v{color:#a3560f!important}.e-question .r b{color:#fff}

/* ---- passage 14 : ajouts FONCTIONNELS seulement (le rendu ci-dessus = maquettes telles quelles) ---- */
[hidden]{display:none!important}
button,a{cursor:pointer;font-family:inherit;text-decoration:none;color:inherit}button.btn,button.btn2{border-style:solid}button.btn2{border:0}
.app{min-height:100dvh}
.x{border:0;color:inherit}
.parts a,.lien a{min-height:44px}
.inp input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:800 17px Nunito;color:#173B2C}
.ch{padding:0;background:none;cursor:pointer}.ch:focus-visible,.btn:focus-visible,.r:focus-visible{outline:3px solid #FFD24A;outline-offset:2px}
.p.moi{cursor:pointer}.ed{border:0;color:inherit;cursor:pointer}
.btn[disabled]{opacity:.6;cursor:default}
.e-question .r{border:0;text-align:left;cursor:pointer;transition:transform .15s,opacity .2s,box-shadow .2s;font-family:inherit}
.e-question .r span{font-size:clamp(15px,5.4vw,26px);line-height:1.15;word-break:break-word}
.e-question .r.choisi{box-shadow:0 0 0 4px #173B2C,0 5px 0 rgba(0,0,0,.25)}
.e-question .reps.fige .r:not(.choisi){opacity:.45}
.e-question .reps.corr .r{opacity:.35}.e-question .reps.corr .r.bon{opacity:1;box-shadow:0 0 0 4px #2f9e6e,0 0 0 8px rgba(47,158,110,.25)}
.e-question .reps.corr .r.choisi:not(.bon){opacity:.8;box-shadow:0 0 0 4px #c0392b}
.e-question .r .ok{margin-left:auto}
.e-question .qb .fig{width:96px;height:auto;flex:none}.fig .t{fill:none;stroke:#f4f1e6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.fig .t.jaune{stroke:#FFD24A}.fig .t.vert{stroke:#a6e36f}.fig .t.bleu{stroke:#9fd3ff}.fig .t.rose,.fig .t.rouge{stroke:#ffb4a2}.fig text{fill:#f4f1e6;font:6px Kalam}
.e-question .corr-txt{margin-top:auto;text-align:center;font:700 17px/1.3 Kalam;padding-top:12px}.e-question .corr-txt b{display:block;font:900 20px Nunito}.e-question .corr-txt b.v{color:#2f7d32}.e-question .corr-txt b.f{color:#b4451f}
.depart{position:fixed;inset:0;display:grid;place-items:center;z-index:30;background:radial-gradient(70% 40% at 50% 40%,#2b6a50,#173B2C 55%,#0f2a20)}.depart b{font:900 120px Nunito;color:#FFD24A;animation:pop .9s ease-out infinite}.depart p{font:700 22px Kalam;color:#f4f1e6;text-align:center;margin-top:8px}@keyframes pop{from{transform:scale(1.4);opacity:.3}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#f4f1e6;color:#173B2C;font:800 14px Nunito;border-radius:999px;padding:10px 18px;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:40}
.qr{position:fixed;inset:0;z-index:35;background:rgba(10,20,16,.85);display:grid;place-items:center;padding:20px}.qr div{background:#fff;border-radius:20px;padding:18px;text-align:center;color:#173B2C;font:800 15px Nunito}.qr svg{display:block;width:240px;height:240px;margin:0 auto 10px}
.msg{margin-top:16px;border-radius:16px;background:rgba(0,0,0,.18);border:1.5px solid rgba(244,241,230,.14);padding:14px;text-align:center;font:700 15px/1.35 Inter}
.e-podium .zm{font-size:17px}
html{background:#0f2a20}html.e-question{background:#f6efdf}