/* AvenStudio — espace client (avenstudio.dev/app.html)
   Même direction que la vitrine : fond nuit, accent lavande, Outfit, surfaces plates et filets fins. */
:root{--ease:cubic-bezier(.25,.1,.35,1);--ok:#43d39a;--warn:#f2c14e;--danger:#ff6b7a;--surface:#0f0f18;--surface-2:#15151f;--line-2:#ffffff24}
html,body{min-height:100%}
body{background:var(--bg);color:var(--text)}
.ready .nav{opacity:1;transform:none}
.hub{padding:7.5rem 0 5rem;min-height:100dvh}
.hub--narrow{max-width:860px;margin-inline:auto}
.hub__head{margin-bottom:2.2rem}
.hub__head h1{font-family:var(--font-display);font-size:clamp(2rem,4vw,2.9rem);font-weight:800;letter-spacing:-.04em;margin:0 0 .5rem;color:#fff;line-height:1.05}
.hub__head p{color:var(--text-muted);margin:0;font-size:1.02rem}
.hv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ready .hv{opacity:1;transform:none}
.ready .hv:nth-child(2){transition-delay:.08s}.ready .hv:nth-child(3){transition-delay:.16s}.ready .hv:nth-child(4){transition-delay:.24s}

/* onglets soulignés */
.tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--line);margin-bottom:2.4rem;overflow-x:auto}
.tabs a{color:var(--text-muted);padding:.75rem 0;font-weight:500;font-size:.95rem;position:relative;white-space:nowrap;transition:color .2s}
.tabs a:hover{color:#fff}
.tabs a.on{color:#fff}
.tabs a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent-glow)}

/* blocs deux colonnes (titre à gauche, formulaire à droite) */
.sect{display:grid;grid-template-columns:300px 1fr;gap:3rem;padding:1.4rem 0 2.6rem;border-bottom:1px solid var(--line)}
.sect:last-child{border-bottom:0}
.sect__t h2{font-family:var(--font-display);font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin:0 0 .6rem;color:#fff}
.sect__t p{color:var(--text-muted);font-size:.92rem;line-height:1.55;margin:0}
.sect__b{min-width:0}
@media (width<=860px){.sect{grid-template-columns:1fr;gap:1.2rem}}

/* formulaires */
.f{margin-bottom:1.1rem}
.f label{display:block;font-size:.86rem;font-weight:600;color:#e8e9f2;margin-bottom:.45rem}
.f label small{color:var(--text-muted);font-weight:400}
.f .hint{color:var(--text-muted);font-size:.8rem;margin-top:.45rem}
.f input,.f select,.f textarea{width:100%;background:#0b0b12;border:1px solid var(--line);color:#fff;border-radius:12px;padding:.8rem .95rem;font:inherit;font-size:.95rem;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,#9598ad 50%),linear-gradient(135deg,#9598ad 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.f input[readonly]{color:var(--text-muted);cursor:not-allowed}
.f input.bad{border-color:var(--danger)}
.f input.good{border-color:var(--ok)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (width<=600px){.f-row{grid-template-columns:1fr}}
.btn-sm{padding:.6rem 1.1rem;font-size:.86rem}
.btn-danger{color:#ffb3bb;background:0 0;border:1px solid #ff6b7a55}
.btn-danger:hover{border-color:var(--danger);color:#fff;transform:translateY(-2px)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-discord{background:#5865F2;color:#fff;border:1px solid #5865F2;box-shadow:0 10px 28px #5865f24d}
.btn-discord:hover{background:#6a76f5;transform:translateY(-2px);color:#fff}

/* cartes et listes */
.card{background:#ffffff05;border:1px solid var(--line);border-radius:16px;padding:1.4rem 1.5rem}
.card--soft{background:#ffffff03}
.row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .grow{flex:1;min-width:0}
.row b{display:block;color:#fff;font-weight:600}
.row small{color:var(--text-muted);font-size:.84rem}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.76rem;font-weight:600;border:1px solid transparent;white-space:nowrap}
.pill-ok{background:#43d39a1a;color:var(--ok);border-color:#43d39a33}
.pill-warn{background:#f2c14e1a;color:var(--warn);border-color:#f2c14e33}
.pill-bad{background:#ff6b7a1a;color:var(--danger);border-color:#ff6b7a33}
.pill-muted{background:#ffffff0a;color:var(--text-muted);border-color:var(--line)}
.pill-acc{background:var(--accent-soft);color:var(--accent-light);border-color:#8c96ff33}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.saved{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);background:#43d39a14;border:1px solid #43d39a33;padding:.3rem .7rem;border-radius:999px;font-weight:700}

/* tableaux */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem}
.tbl th{text-align:left;color:var(--text-muted);font-weight:500;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.tbl td{padding:.85rem .8rem;border-bottom:1px solid #ffffff0a;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.84rem;letter-spacing:.02em}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#ffffff03}
.empty{padding:2.5rem 1rem;text-align:center;color:var(--text-muted)}
.empty b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.3rem}

/* tuiles d'aperçu */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem}
@media (width<=860px){.tiles{grid-template-columns:1fr}}
.tile{background:#ffffff05;border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.tile:hover{border-color:#ffffff2e;transform:translateY(-2px)}
.tile small{display:block;color:var(--text-muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
.tile b{font-family:var(--font-display);font-size:1.9rem;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1}
.tile > span{display:block;color:var(--text-muted);font-size:.86rem;margin-top:.5rem}
.tile .ic{position:absolute;right:1.2rem;top:1.2rem;color:var(--accent);opacity:.8}

/* avatar + menu */
.ava{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#8c96ff,#4d57b3);color:#fff;display:inline-grid;place-items:center;font-weight:700;font-size:.95rem;overflow:hidden;flex:0 0 34px;text-transform:uppercase}
.ava img{width:100%;height:100%;object-fit:cover}
.ava--lg{width:56px;height:56px;flex-basis:56px;font-size:1.4rem}
.umenu{position:relative}
.umenu__btn{display:inline-flex;align-items:center;gap:.6rem;padding:.3rem .8rem .3rem .3rem;border-radius:999px;border:1px solid #ffffff29;background:0 0;color:#fff;font:inherit;font-weight:600;cursor:pointer;min-height:42px;transition:border-color .2s,background .2s}
.umenu__btn:hover,.umenu--open .umenu__btn{border-color:var(--accent);background:#ffffff0a}
.umenu__btn .chev{width:10px;height:10px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg) translateY(-2px);margin-left:.1rem;transition:transform .2s}
.umenu--open .chev{transform:rotate(-135deg) translateY(-2px)}
.umenu__dd{position:absolute;right:0;top:calc(100% + .6rem);min-width:240px;background:#0f0f17;border:1px solid var(--line);border-radius:16px;padding:.5rem;box-shadow:0 20px 60px #00000080;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .2s,transform .2s;z-index:80}
.umenu--open .umenu__dd{opacity:1;pointer-events:auto;transform:none}
.umenu__id{display:flex;align-items:center;gap:.8rem;padding:.7rem .8rem .9rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.umenu__id b{display:block;color:#fff;font-size:1rem}
.umenu__id small{color:var(--text-muted);font-size:.8rem}
.umenu__dd a,.umenu__dd button{display:flex;align-items:center;gap:.7rem;width:100%;padding:.7rem .8rem;border-radius:10px;color:#e8e9f2;font:inherit;font-size:.92rem;background:0 0;border:0;cursor:pointer;text-align:left;transition:background .15s}
.umenu__dd a:hover,.umenu__dd button:hover{background:#ffffff0a;color:#fff}
.umenu__dd .out{color:#ff8a96}
.umenu__dd .ic{width:17px;height:17px;flex-basis:17px;opacity:.85}

/* authentification */
.auth{min-height:100dvh;display:grid;place-items:center;padding:6.5rem 1rem 3rem}
.auth__card{width:100%;max-width:440px;background:#ffffff05;border:1px solid var(--line);border-radius:22px;padding:2.2rem;opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.ready .auth__card{opacity:1;transform:none}
.auth__brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:1.2rem;margin-bottom:1.6rem;color:#fff}
.auth__brand img{width:36px;height:36px;object-fit:contain}
.auth h1{font-family:var(--font-display);font-size:1.75rem;font-weight:800;letter-spacing:-.035em;margin:0 0 .35rem;color:#fff}
.auth .lead{color:var(--text-muted);margin:0 0 1.6rem;font-size:.95rem}
.auth .btn{width:100%}
.auth .or{display:flex;align-items:center;gap:.8rem;color:var(--text-muted);font-size:.8rem;margin:1.1rem 0}
.auth .or:before,.auth .or:after{content:"";flex:1;height:1px;background:var(--line)}
.auth .links{display:flex;justify-content:space-between;gap:1rem;margin-top:1.2rem;font-size:.88rem}
.auth .links a{color:var(--text-muted)}.auth .links a:hover{color:#fff}
.msg{padding:.8rem .95rem;border-radius:12px;font-size:.9rem;margin-bottom:1rem;border:1px solid}
.msg-err{background:#ff6b7a12;border-color:#ff6b7a44;color:#ffc2c8}
.msg-ok{background:#43d39a12;border-color:#43d39a44;color:#b6f3d6}
.msg-info{background:var(--accent-soft);border-color:#8c96ff44;color:var(--accent-light)}

/* fenêtre modale (liaison Discord obligatoire) */
.modal{position:fixed;inset:0;background:#05050adb;backdrop-filter:blur(8px);display:grid;place-items:center;z-index:200;padding:1rem;opacity:0;transition:opacity .25s}
.modal.on{opacity:1}
.modal__box{width:100%;max-width:440px;background:#0f0f17;border:1px solid var(--line);border-radius:22px;padding:2rem;text-align:center;transform:translateY(12px);transition:transform .3s var(--ease)}
.modal.on .modal__box{transform:none}
.modal__ico{width:64px;height:64px;border-radius:50%;background:#5865F21f;color:#8d97ff;display:grid;place-items:center;margin:0 auto 1.1rem}
.modal__ico .ic{width:30px;height:30px;flex-basis:30px}
.modal h3{font-family:var(--font-display);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem;color:#fff}
.modal p{color:var(--text-muted);font-size:.93rem;margin:0 0 1.4rem}
.modal .btn{width:100%;margin-bottom:.6rem}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#15151f;border:1px solid var(--line);color:#fff;padding:.8rem 1.2rem;border-radius:12px;font-size:.92rem;box-shadow:0 20px 50px #00000080;opacity:0;transition:opacity .25s,transform .25s;z-index:300;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.ok{border-color:#43d39a55}.toast.err{border-color:#ff6b7a66}

/* 2FA */
.qr{display:grid;grid-template-columns:160px 1fr;gap:1.4rem;align-items:center}
.qr img{width:160px;height:160px;border-radius:12px;background:#fff;padding:8px}
@media (width<=600px){.qr{grid-template-columns:1fr}}
code.secret{display:block;background:#0b0b12;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;font-size:.82rem;word-break:break-all;color:var(--accent-light);margin:.6rem 0}
.keybox{font-family:ui-monospace,Menlo,monospace;font-size:1.05rem;letter-spacing:.06em;background:#0b0b12;border:1px dashed #8c96ff66;border-radius:12px;padding:.9rem 1rem;color:#fff;word-break:break-all;margin:.8rem 0}
.ic{display:inline-flex;width:18px;height:18px;flex:0 0 18px}
.ic svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang-select select{white-space:nowrap;border-radius:12px;min-height:42px;padding:.5rem .95rem;font-size:.9rem;font-weight:500;color:#fff;background:#0000;border:1px solid #ffffff29;font-family:inherit;appearance:auto}
.lang-select option{background:#15151d;color:#fff}
.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media (width<=900px){.admin-grid{grid-template-columns:1fr}}
.footer-mini{text-align:center;color:var(--text-muted);font-size:.8rem;padding:2rem 0 0}