:root{color-scheme:dark;--bg:#130f1e;--surface:#241b31;--surface2:#30243b;--border:#51405d;--text:#fff2fa;--soft:#d2c1d9;--muted:#a99ab3;--pink:#ff78ac;--pinklight:#ffc3d8;--violet:#bc8dff;--success:#9aefcd;--warning:#ffd690}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 25% 0%,#372039 0,transparent 48%),linear-gradient(160deg,#15101f,#191022 60%,#100f1b);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);font-size:16px}button,input,textarea,select{font:inherit}a{color:inherit}.ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:100%;filter:blur(90px);opacity:.2}.ambient-one{width:330px;height:330px;background:#c34d8a;top:1%;right:-140px}.ambient-two{width:340px;height:340px;background:#814ed0;bottom:-130px;left:-150px}.shell{max-width:1080px;min-height:100vh;margin:auto;padding:0 18px 24px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:21px 0 20px;gap:10px;border-bottom:1px solid #ffffff16}.logo{display:flex;align-items:center;text-decoration:none;font-size:1.3rem;font-weight:850;letter-spacing:-.8px}.logo>span:not(.logo-icon){color:var(--pink)}.logo-icon{display:grid;place-items:center;width:33px;height:33px;background:linear-gradient(125deg,#e65b95,#9c6cf9);border-radius:11px;margin-right:9px;font-size:23px}.logo small{align-self:center;font-size:.56rem;letter-spacing:1px;font-weight:750;color:var(--pinklight);border:1px solid #bd7295;border-radius:20px;padding:3px 6px;margin-left:9px}.top-user{display:flex;align-items:center;gap:10px;font-size:.83rem;color:var(--soft)}.top-user .username{max-width:115px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:13px;padding:12px 17px;font-weight:750;line-height:1.2;min-height:46px;cursor:pointer;text-decoration:none;transition:transform .14s,filter .14s;background:#4e405d;color:var(--text)}.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--pink);outline-offset:2px}.btn.primary{color:#241323;background:linear-gradient(120deg,#ff91b8,#ffc2b7);box-shadow:0 8px 25px #d93e7b35}.btn.purple{background:#5a3f7d}.btn.success{background:#34725c;color:#eafff5}.btn.danger{background:#754258}.btn.ghost{border:1px solid var(--border);background:transparent;box-shadow:none}.btn.small{padding:8px 12px;min-height:36px;font-size:.84rem}.btn.block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.hero{text-align:center;padding:41px 0 16px}.hero .eyebrow,.eyebrow{display:inline-block;text-transform:uppercase;font-size:.73rem;letter-spacing:2px;color:var(--pink);font-weight:800;margin:0 0 12px}.hero h1{font-size:clamp(2.3rem,7vw,4.4rem);line-height:1.04;letter-spacing:-2px;margin:5px 0 18px}.hero h1 em{font-style:normal;color:#ff95be}.hero p{max-width:570px;margin:0 auto 22px;color:var(--soft);font-size:1.03rem;line-height:1.5}.auth-layout{display:grid;grid-template-columns:1fr 405px;gap:26px;align-items:center;margin:24px 0 40px}.auth-copy{padding:0 12px}.feature-list{display:grid;gap:15px;margin-top:25px;color:#e0cee3}.feature-list div{display:flex;align-items:center;gap:12px}.feature-list b{color:#ffacd0;font-size:1.3rem}.panel,.card{background:linear-gradient(145deg,#2b2137ed,#231c30f2);border:1px solid #56425e;border-radius:22px;padding:23px;box-shadow:0 14px 55px #09071025}.card{box-shadow:none;border-radius:19px}.panel h2,.card h2{font-size:1.25rem;margin:0 0 8px}.subtle{font-size:.9rem;color:var(--soft);line-height:1.5}.muted{color:var(--muted)}.form{display:grid;gap:15px}.field{display:grid;gap:7px}.field label{font-size:.87rem;font-weight:750;color:#edd8ee}.field input,.field select,.field textarea,.text-field{width:100%;color:var(--text);background:#191425;border:1px solid #5b4967;border-radius:13px;min-height:48px;padding:13px 14px;outline:none}.field textarea{min-height:92px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#90829b}.field select{appearance:auto}.field input[type=date]{color-scheme:dark}.field input[type=number]{min-width:0}.checkline{display:flex;align-items:flex-start;gap:10px;color:var(--soft);font-size:.86rem;line-height:1.4}.checkline input{margin-top:4px;accent-color:#ff94b7;width:18px;height:18px;flex-shrink:0}.switch{display:flex;gap:8px;margin-bottom:22px;padding:4px;background:#171321;border-radius:13px}.switch button{flex:1;border:0;padding:11px;cursor:pointer;background:none;color:var(--muted);border-radius:10px;font-weight:750}.switch button.active{background:#5d3d68;color:#fff}.error{padding:12px 14px;border:1px solid #a65a78;background:#61304b99;color:#ffdae9;border-radius:13px;font-size:.88rem;margin:0 0 15px}.invite-hero{margin:20px 0;padding:21px;border:1px solid #ad6e9f;border-radius:20px;background:linear-gradient(135deg,#513351,#382c4c)}.invite-hero h2{margin:0 0 7px}.invite-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:15px}.app-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:30px 0 20px}.app-top h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 4px}.app-top p{margin:0;color:var(--soft)}.game-picker{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.game-picker select{background:#281d35;color:var(--text);padding:12px;border:1px solid var(--border);border-radius:12px;max-width:260px}.nav{display:flex;gap:8px;overflow:auto;white-space:nowrap;padding:5px 0 20px;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{border:1px solid #52415d;background:#251b30;color:#dbc9e0;border-radius:13px;padding:11px 15px;font-weight:750;cursor:pointer}.nav button.active{background:#a35984;color:#fff;border-color:#d777aa}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{padding:17px;border-radius:16px;background:#21182d;border:1px solid #4c365a}.stat .value{font-size:1.5rem;font-weight:850;letter-spacing:-1px;margin:6px 0}.stat .label{color:#c6b0cd;font-size:.83rem}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:24px 0 12px}.section-title h2{font-size:1.13rem;margin:0}.pill{display:inline-flex;align-items:center;border-radius:25px;background:#633b5c;color:#ffd8e7;padding:5px 9px;font-size:.77rem;font-weight:800}.pill.green{background:#275a49;color:#c0f5de}.pill.gold{background:#695035;color:#ffe6a7}.pill.blue{background:#3e3e70;color:#d5d7ff}.score-row{display:flex;gap:13px;align-items:center;justify-content:space-between;padding:14px 2px;border-bottom:1px solid #ffffff18}.score-row:last-child{border:0}.score-name{display:flex;align-items:center;gap:11px;font-weight:750}.avatar{width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,#bd74ac,#855dce);display:grid;place-items:center;font-weight:900;color:#fff}.score-num{font-weight:850;font-variant-numeric:tabular-nums;color:#ffa9c9}.progress{height:10px;border-radius:10px;background:#46364f;overflow:hidden;margin:10px 0 5px}.progress div{height:100%;border-radius:10px;background:linear-gradient(90deg,#fc80ae,#d0a7ff);transition:width .2s}.empty{text-align:center;padding:27px 12px;background:#21182c;border:1px dashed #62516c;border-radius:18px;color:var(--soft)}.empty .symbol{font-size:2rem;margin:0 0 6px}.empty strong{display:block;color:var(--text);font-size:1rem}.empty p{margin:7px auto 13px;max-width:380px;font-size:.91rem}.challenge{display:grid;gap:10px;margin:12px 0}.challenge h3{margin:0;font-size:1.04rem}.challenge .challenge-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.challenge .challenge-body{white-space:pre-wrap;line-height:1.5;color:#ebd8e9;font-size:.93rem}.meta{font-size:.8rem;color:#baa5c5}.buttons{display:flex;gap:9px;flex-wrap:wrap}.notice{padding:14px 15px;background:#442f4c;border:1px solid #826080;border-radius:13px;color:#f7ddeb;font-size:.91rem}.mild{background:#2c2840;border-color:#5f587d}.inline-form{display:flex;gap:10px}.inline-form>*{flex:1}.separator{border:0;border-top:1px solid #49384e;margin:20px 0}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);opacity:0;background:#f2d0e4;color:#251426;font-weight:750;padding:13px 18px;border-radius:14px;box-shadow:0 14px 35px #0007;max-width:90vw;z-index:99;transition:transform .2s,opacity .2s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}.footer{margin:45px 0 0;border-top:1px solid #ffffff13;padding:19px 0;display:flex;justify-content:space-between;gap:12px;font-size:.74rem;color:#95859d}.splash{text-align:center;padding:110px 0}.heart{font-size:3rem;color:var(--pink)}.splash h1{margin:9px 0}.splash p{color:var(--soft)}.solo-intro{max-width:650px;margin:33px auto}.big-title{font-size:clamp(2.2rem,6vw,3.5rem);line-height:1.1;margin:0 0 13px;letter-spacing:-1.5px}.sharebox{width:100%;border:1px dashed #cd83ab;background:#1c1828;border-radius:13px;color:#ffcee3;padding:13px;overflow-wrap:anywhere;font-size:.85rem}.small-note{font-size:.77rem;color:var(--muted);line-height:1.5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.create-card{max-width:680px;margin:28px auto}.chip{display:inline-flex;padding:6px 10px;border-radius:99px;background:#563b5b;color:#ffe0ef;font-size:.8rem}@media(max-width:760px){.auth-layout{grid-template-columns:1fr}.auth-copy{padding:0}.hero{padding:17px 0 0}.panel{padding:19px}.grid2{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}.footer{flex-direction:column;gap:5px}.app-top{align-items:stretch}.game-picker{width:100%}.game-picker select{flex:1}.auth-copy{display:none}.auth-layout{margin-top:6px}.big-title{font-size:2rem}}@media(max-width:420px){.shell{padding:0 12px 20px}.logo small{display:none}.topbar{padding:15px 0}.top-user{gap:5px}.grid3{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.card,.panel{padding:16px}.app-top{margin-top:19px}.buttons .btn{flex:1}.nav button{padding:9px 12px}.section-title{align-items:flex-start}}

/* V3 : nouvel accueil immersif, formulaire seulement après action */
.welcome{min-height:595px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);align-items:center;gap:46px;padding:45px 6px 18px}
.welcome-copy{position:relative;z-index:1}
.welcome-overline{display:inline-block;background:#f87bb11c;border:1px solid #fa8fb249;border-radius:50px;color:#ffc1db;letter-spacing:2px;padding:10px 16px;font-weight:800;font-size:.73rem}
.welcome h1{font-size:clamp(3.25rem,5.6vw,5.6rem);line-height:1.03;letter-spacing:-3px;margin:26px 0 25px;font-weight:850}
.welcome h1 em{font-style:normal;background:linear-gradient(110deg,#ff88b8,#ffc2c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome-lead{font-size:1.13rem;line-height:1.7;color:#e1cddf;max-width:530px;margin:0 0 30px}
.welcome-lead strong{color:#ffe2ef;font-weight:800}
.welcome-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.welcome-actions .btn{font-size:1rem;padding:17px 23px;min-height:55px;border-radius:16px}
.welcome-actions .btn.primary{box-shadow:0 10px 32px #f05a9270}
.welcome-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:25px;color:#bba7c4;font-size:.78rem}
.welcome-preview{position:relative;padding:17px 12px 38px;max-width:460px;width:100%;justify-self:center}
.preview-stamp{position:absolute;z-index:2;top:0;right:-2px;transform:rotate(7deg);font-size:.7rem;letter-spacing:1.5px;font-weight:900;background:#fac7d8;color:#4d2945;padding:10px 15px;border-radius:8px;box-shadow:0 7px 22px #0005}
.preview-envelope{position:relative;background:linear-gradient(155deg,#42293e,#322240 60%,#271c38);border:1px solid #aa738e;border-radius:26px;padding:34px 30px 25px;box-shadow:0 27px 75px #05020a7a,0 0 75px #e775a629;transform:rotate(2deg);transition:transform .2s ease}
.preview-envelope:hover{transform:rotate(0deg) translateY(-3px)}
.preview-heart{display:grid;place-items:center;background:linear-gradient(135deg,#fa78ac,#ca65af);color:white;font-size:2.6rem;width:68px;height:68px;border-radius:22px;box-shadow:0 10px 25px #c35a9455;margin-bottom:24px}
.preview-to{display:block;font-size:.74rem;letter-spacing:1.9px;text-transform:uppercase;font-weight:800;color:#e6b2ce}
.preview-title{font-size:2.15rem;font-weight:850;line-height:1.1;letter-spacing:-1.3px;margin:13px 0}
.preview-dots{color:#ff9dc5}
.preview-envelope p{font-size:.98rem;color:#dfcadc;line-height:1.55;margin:0 0 24px}
.preview-blur{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:17px 15px;border:1px dashed #bb83ac;border-radius:14px;background:#261c33;filter:blur(2.8px);opacity:.9;font-weight:800;color:#ffe7ef}
.preview-blur span:last-child{color:#ffbcd9}
.preview-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:9px;color:#f5bdd3;font-size:.78rem;font-weight:700;margin-top:23px}
.preview-bubble{position:absolute;bottom:10px;left:-24px;max-width:280px;background:#ffe2eb;color:#512b47;font-weight:800;border-radius:18px 18px 18px 4px;padding:13px 16px;font-size:.82rem;box-shadow:0 13px 32px #08051180;transform:rotate(-5deg)}
.welcome-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:15px 6px 42px}
.welcome-steps>div{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:13px;align-content:start;padding:18px;background:#241b30a0;border:1px solid #57415a;border-radius:15px}
.welcome-steps span{grid-row:1/span 2;color:#f5a4c8;font-weight:900;font-size:1.1rem}
.welcome-steps strong{font-size:.94rem;color:#ffe7f1}
.welcome-steps small{margin-top:5px;color:#bca9c5;line-height:1.45;font-size:.78rem}
.auth-focus{width:min(100%,460px);margin:40px auto 70px}
.auth-back{background:none;color:#ddbed3;border:0;cursor:pointer;font-size:.88rem;font-weight:750;padding:12px 2px 17px}
.auth-back:hover{text-decoration:underline}
.auth-panel{padding:26px}
.auth-panel h1{font-size:1.65rem;margin:0 0 7px;letter-spacing:-.8px}
.auth-panel .switch{margin-top:24px}
@media(max-width:850px){.welcome{grid-template-columns:1fr .8fr;gap:20px;min-height:520px}.welcome h1{font-size:clamp(2.9rem,6vw,4.5rem)}.preview-envelope{padding:24px}.preview-title{font-size:1.8rem}.welcome-lead{font-size:1rem}}
@media(max-width:680px){.welcome{display:flex;flex-direction:column;min-height:unset;align-items:stretch;gap:12px;padding:34px 6px 12px}.welcome h1{font-size:clamp(3.1rem,11vw,4.8rem);margin:20px 0 18px;letter-spacing:-2.6px}.welcome-lead{font-size:1.04rem;line-height:1.6;margin-bottom:22px}.welcome-actions{display:grid;grid-template-columns:1fr;gap:9px}.welcome-actions .btn{width:100%;padding:15px;min-height:52px}.welcome-trust{margin-top:20px;font-size:.72rem}.welcome-preview{max-width:410px;margin:20px auto 0;padding:10px 10px 38px}.preview-envelope{transform:rotate(1deg);padding:25px}.preview-heart{width:54px;height:54px;font-size:2.1rem;border-radius:17px;margin-bottom:16px}.preview-title{font-size:1.95rem}.preview-stamp{right:0}.preview-bubble{left:-3px;bottom:9px}.welcome-steps{grid-template-columns:1fr;padding-bottom:22px;gap:8px}.welcome-steps>div{padding:13px 15px}.auth-focus{margin:22px auto 50px}}
@media(prefers-reduced-motion:reduce){.preview-envelope{transition:none}}

.preview-bubble{bottom:-20px;left:-5px}
@media(max-width:680px){.preview-bubble{bottom:-16px;left:0}}

/* Novembre 2026 : démonstration interactive et démarrage rapide */
.demo-trigger{width:100%;border:1px solid #e6a3c2;background:#ffffff10;color:#ffe0ef;border-radius:13px;padding:12px 10px;margin-top:13px;font-size:.89rem;font-weight:800;cursor:pointer;transition:background .18s}
.demo-trigger:hover{background:#ffb5ce22}
.demo-trigger:focus-visible,.starter-item:focus-visible{outline:2px solid #ffbbd7;outline-offset:2px}
.demo-reveal{border:1px solid #e59fc3;background:linear-gradient(135deg,#733e69,#50334f);padding:16px;border-radius:15px;animation:revealCard .22s ease-out}
.demo-reveal strong{color:#fff;font-size:.95rem}.demo-reveal p{color:#ffe7f2;margin:9px 0 13px;font-weight:600}
@keyframes revealCard{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.next-up{margin:22px 0 4px;display:flex;gap:22px;justify-content:space-between;align-items:center;padding:20px 24px;border:1px solid #b26799;border-radius:20px;background:linear-gradient(115deg,#52304c,#3a274a)}
.next-up .eyebrow{display:block;font-size:.68rem;margin:0 0 6px}.next-up strong{font-size:1.13rem;color:#ffe4ee}.next-up p{margin:8px 0 0;color:#e4c8da;font-size:.9rem}.next-up .btn{flex-shrink:0}
.starter-wrap{margin:15px 0 23px}.starter-title{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:11px}.starter-title strong{font-size:1rem}.starter-title span{font-size:.76rem;color:#ccb9d1}
.starter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.starter-item{min-width:0;border:1px solid #6f5776;background:linear-gradient(145deg,#392940,#30243b);color:#ffdfeb;padding:13px 11px;border-radius:15px;cursor:pointer;display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;transition:transform .15s,background .15s}.starter-item:hover{background:#5d3b64;transform:translateY(-2px)}.starter-item .starter-icon{font-size:1.28rem}.starter-item strong{font-size:.87rem}.starter-item small{font-size:.73rem;color:#cab7d0;line-height:1.35}
@media(max-width:600px){.next-up{padding:17px;flex-direction:column;align-items:stretch;gap:14px}.next-up .btn{width:100%}.starter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.starter-title{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.demo-reveal{animation:none}.starter-item{transition:none}}
.countdown{display:block;color:#ffc2d7;font-size:1.4rem}.countdown-date{display:block;font-size:.77rem;font-weight:600;color:#c7b4ce;margin-top:1px}
.quick-start{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;background:#47324c;border:1px dashed #d18daf;border-radius:14px;color:#ffe2ef;font-weight:800;text-align:left;padding:13px 15px;margin:14px 0 21px;cursor:pointer}.quick-start span{color:#d7b6ce;font-weight:550;font-size:.75rem}.quick-start:hover{background:#59365b}.quick-start:focus-visible{outline:2px solid #ffc0de;outline-offset:2px}@media(max-width:540px){.quick-start{flex-direction:column;align-items:flex-start;gap:4px}}