/* ============================================================
   QuizzyLive — interface 2026
   Identité : néon festif (rose/violet) sur nuit profonde.
   Toutes les classes historiques sont conservées.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg-top:#08061A; --bg-bottom:#0D0B26;
  --surface:#141126; --elevated:#1B1735;
  --card:rgba(24,20,46,.55); --card-solid:#1B1735;
  --text:#FFFFFF; --soft:#A9A6C4; --line:rgba(255,255,255,.09);
  --pink:#FF4FA3; --fuchsia:#D946EF; --purple:#8B5CF6; --blue:#38BDF8;
  --green:#22C55E; --green-dark:#16A34A; --yellow:#FFB800; --orange:#FF8A00; --red:#EF4444;
  --glow:#A855F7;
  --r-sm:16px; --r-md:22px; --r-lg:30px;
  --grad-brand:linear-gradient(135deg,var(--pink),var(--fuchsia) 55%,var(--purple));
  --grad-cool:linear-gradient(135deg,var(--purple),var(--blue));
  --shadow-1:0 10px 34px rgba(0,0,0,.38);
  --shadow-glow:0 10px 30px rgba(216,70,239,.32);
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  font-family:"Outfit","Geist",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1200px 620px at 72% -12%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(900px 520px at -6% 104%, rgba(56,189,248,.16), transparent 60%),
    linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  color:var(--text);min-height:100vh;
  font-feature-settings:"ss01";
}
::selection{background:rgba(255,79,163,.35);color:#fff;}

/* Barre de défilement discrète */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px;border:3px solid transparent;background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);border:3px solid transparent;background-clip:content-box;}

/* Focus clavier visible (accessibilité) */
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:6px;}

/* Aurora : deux halos qui dérivent lentement (signature de l'app) */
.app{position:relative;max-width:560px;margin:0 auto;padding:84px 16px 44px;}
.app::before,.app::after{
  content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);pointer-events:none;
}
.app::before{width:460px;height:460px;top:-160px;right:-120px;background:rgba(216,70,239,.16);animation:drift1 26s var(--ease) infinite alternate;}
.app::after{width:400px;height:400px;bottom:-140px;left:-140px;background:rgba(56,189,248,.12);animation:drift2 32s var(--ease) infinite alternate;}
@keyframes drift1{from{transform:translate(0,0);}to{transform:translate(-60px,50px);}}
@keyframes drift2{from{transform:translate(0,0);}to{transform:translate(70px,-40px);}}

.muted{color:var(--soft);}
h1{font-size:1.875rem;margin:0;font-weight:900;letter-spacing:-.02em;}
h2{font-size:1.1875rem;margin:0 0 12px;font-weight:800;letter-spacing:-.01em;}
.subtitle{color:var(--soft);font-size:0.9375rem;margin:4px 0 22px;}

/* ===== Boutons ===== */
.btn{border:none;border-radius:999px;padding:13px 20px;font-weight:800;font-size:0.9375rem;cursor:pointer;font-family:inherit;color:#fff;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease),opacity .18s var(--ease);}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--grad-brand);box-shadow:var(--shadow-glow);}
.btn-primary:hover{box-shadow:0 14px 38px rgba(216,70,239,.45);}
.btn-create{background:var(--grad-cool);box-shadow:0 10px 28px rgba(139,92,246,.38);}
.btn-create:hover{box-shadow:0 14px 36px rgba(139,92,246,.5);}
.btn-ghost{background:rgba(255,255,255,.05);border:1.5px solid var(--line);color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.2);}
.btn-danger{background:rgba(239,68,68,.12);color:var(--red);border:1.5px solid rgba(239,68,68,.32);}
.btn-danger:hover{background:rgba(239,68,68,.2);}
.btn-small{padding:8px 14px;font-size:0.8125rem;border-radius:999px;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.brand{display:flex;align-items:center;gap:8px;}
.brand img{width:42px;height:42px;}
.brand-name{font-size:1.25rem;font-weight:800;}
.brand-name .live{color:var(--orange);}
.gear{background:none;border:none;color:rgba(255,255,255,.7);font-size:1.375rem;cursor:pointer;}

.chars{display:flex;justify-content:center;margin:2px 0 -22px;}
.chars img{width:86%;max-width:380px;}

/* ===== Grands boutons d'accueil ===== */
.cta{position:relative;height:150px;border-radius:30px;display:flex;align-items:center;
  padding:0 18px;gap:14px;overflow:hidden;margin-bottom:18px;cursor:pointer;border:none;width:100%;text-align:left;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);}
.cta.join{background:linear-gradient(135deg,#FF008A,#C000FF,#7B61FF);box-shadow:0 14px 40px rgba(255,45,149,.42);}
.cta.create{background:linear-gradient(135deg,#FFB800,#FF8A00,#FF5E00);box-shadow:0 14px 40px rgba(255,138,0,.4);}
.cta:hover{transform:translateY(-2px);}
.cta.join:hover{box-shadow:0 18px 52px rgba(255,45,149,.55);}
.cta.create:hover{box-shadow:0 18px 52px rgba(255,138,0,.5);}
.cta:active{transform:scale(.98);}
.cta .crowd{position:absolute;left:0;right:0;bottom:-14px;width:100%;height:78px;object-fit:cover;opacity:.95;}
.cta .ring{width:102px;height:102px;border-radius:51px;background:#FFF0F6;display:flex;align-items:center;justify-content:center;flex:0 0 auto;z-index:1;box-shadow:0 0 18px rgba(255,255,255,.55);}
.cta .ring .inner{width:90px;height:90px;border-radius:45px;background:#0a0612;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cta .ring img{width:78px;height:78px;}
.cta .txt{flex:1;z-index:1;}
.cta .txt .t{color:#fff;font-size:1.375rem;font-weight:900;line-height:24px;white-space:pre-line;letter-spacing:-.01em;}
.cta .txt .s{color:rgba(255,255,255,.92);font-size:0.7812rem;margin-top:7px;line-height:17px;white-space:pre-line;}
.cta .go{width:48px;height:48px;border-radius:24px;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:center;z-index:1;flex:0 0 auto;font-size:1.375rem;font-weight:800;transition:transform .2s var(--ease);}
.cta:hover .go{transform:translateX(3px);}
.cta.join .go{color:#00B5FF;}
.cta.create .go{color:#FF8A00;}

.newcard{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:rgba(255,255,255,.045);border:1px solid var(--line);margin-bottom:16px;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease);}
.newcard:hover{background:rgba(255,255,255,.08);transform:translateY(-1px);}
.newcard .gift{font-size:1.875rem;}
.newcard .badge-new{align-self:flex-start;background:var(--pink);border-radius:8px;padding:2px 8px;font-size:0.625rem;font-weight:800;letter-spacing:.5px;display:inline-block;margin-bottom:4px;}
.newcard .nt{font-size:0.875rem;font-weight:700;}
.newcard .ns{color:rgba(255,255,255,.72);font-size:0.75rem;margin-top:1px;}

.signin{text-align:center;margin-top:6px;color:rgba(255,255,255,.7);font-size:0.875rem;cursor:pointer;}
.signin .pink{color:var(--pink);}

/* ===== Cartes & formulaires ===== */
.card{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:var(--r-md);padding:20px;margin-bottom:16px;
  box-shadow:var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.05);}
input,select,textarea{width:100%;background:rgba(255,255,255,.05);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;color:var(--text);font-family:inherit;font-size:0.9375rem;margin-top:6px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,79,163,.18);background:rgba(255,255,255,.07);}
textarea{resize:vertical;min-height:60px;}
label{display:block;font-weight:700;margin-top:14px;font-size:0.875rem;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.chip{padding:8px 15px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);cursor:pointer;font-size:0.875rem;font-family:inherit;font-weight:600;
  transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);}
.chip:hover{background:rgba(255,255,255,.09);transform:translateY(-1px);}
.chip.active{background:var(--grad-brand);border-color:transparent;box-shadow:0 6px 18px rgba(216,70,239,.35);}
.swatches{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.swatch{width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:transform .15s var(--ease);}
.swatch:hover{transform:scale(1.12);}
.swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(168,85,247,.5);}
.qcard{background:var(--elevated);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;margin-bottom:14px;}
.qhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.qnum{font-weight:800;color:var(--purple);}
.qtools{display:flex;gap:6px;}
.qtool{width:34px;height:34px;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-family:inherit;font-size:0.9375rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease),transform .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease);}
.qtool:hover{background:rgba(255,255,255,.11);transform:translateY(-1px);}
.qtool:active{transform:scale(.92);}
.qtool:disabled{opacity:.3;cursor:not-allowed;transform:none;}
.qtool.danger{color:#F87171;border-color:rgba(239,68,68,.3);}
.qtool.danger:hover{background:rgba(239,68,68,.16);}
.opt-row{display:flex;align-items:center;gap:8px;margin-top:8px;}
.opt-row input{margin-top:0;}
.opt-correct{width:38px;height:38px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;font-size:1.125rem;flex:0 0 auto;color:#fff;transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);}
.opt-correct:hover{transform:scale(1.06);}
.opt-correct.on{background:var(--green);border-color:var(--green);box-shadow:0 4px 14px rgba(34,197,94,.4);}
.preview-img{max-width:120px;border-radius:12px;margin-top:8px;display:block;}
.error{color:var(--red);margin-top:10px;font-size:0.875rem;}
.center{text-align:center;}

/* ===== Cartes "Mes quiz" ===== */
.quizcard{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);box-shadow:var(--shadow-1);}
.quizcard:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(0,0,0,.5);border-color:rgba(255,255,255,.16);}
.quizcard .cover{width:100%;height:130px;object-fit:cover;display:block;background:#17132b;}
.quizcard .info{padding:14px;}
.quizcard .trow{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.quizcard .qt{font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge{font-size:0.6875rem;padding:3px 10px;border-radius:999px;font-weight:800;flex:0 0 auto;letter-spacing:.2px;}
.badge.draft{background:rgba(255,184,0,.16);color:var(--yellow);border:1px solid rgba(255,184,0,.25);}
.badge.pub{background:rgba(34,197,94,.16);color:var(--green);border:1px solid rgba(34,197,94,.25);}
.badge.live{background:rgba(255,45,149,.14);color:#FF6AB5;border:1px solid rgba(255,45,149,.35);display:inline-flex;align-items:center;gap:6px;}
.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF4FA3;box-shadow:0 0 0 0 rgba(255,79,163,.55);animation:livedot 1.8s ease-out infinite;}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(255,79,163,.55);}70%{box-shadow:0 0 0 7px rgba(255,79,163,0);}100%{box-shadow:0 0 0 0 rgba(255,79,163,0);}}
.quizcard .meta{color:var(--soft);font-size:0.8125rem;margin-top:4px;}
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.filter-row{display:flex;gap:8px;margin:14px 0;}

/* ===== Barre de recherche façon iOS ===== */
.searchbar{display:flex;align-items:center;gap:9px;margin:14px 0 2px;padding:0 14px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:16px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);}
.searchbar:focus-within{border-color:var(--pink);box-shadow:0 0 0 3px rgba(255,79,163,.16);}
.searchbar .s-ic{font-size:0.9375rem;opacity:.55;flex:0 0 auto;}
.searchbar input{flex:1;background:transparent;border:none;margin:0;padding:13px 0;font-size:0.9375rem;box-shadow:none;}
.searchbar input:focus{border:none;box-shadow:none;background:transparent;}
.searchbar input::-webkit-search-cancel-button{display:none;}
.searchbar .s-clear{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.16);color:#fff;font-size:0.6875rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--ease);}
.searchbar .s-clear:hover{background:rgba(255,255,255,.28);}

/* ===== Profil ===== */
.hero{background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;text-align:center;margin-bottom:16px;box-shadow:var(--shadow-1);}
.hero .ava{width:84px;height:84px;border-radius:50%;background:var(--elevated);display:flex;align-items:center;justify-content:center;font-size:2.625rem;margin:0 auto 12px;border:2px solid rgba(255,255,255,.1);}
.hero .nm{font-size:1.375rem;font-weight:800;}
.hero .code{color:var(--soft);font-size:0.8125rem;margin-top:4px;}
.levelbox{margin-top:16px;text-align:left;}
.levelbox .lt{display:flex;justify-content:space-between;font-size:0.8125rem;font-weight:700;}
.barbg{height:10px;border-radius:6px;background:rgba(255,255,255,.07);margin-top:6px;overflow:hidden;}
.barfill{height:100%;background:var(--grad-brand);border-radius:6px;transition:width .6s var(--ease);}
.statsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.stat{background:var(--card);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;transition:transform .18s var(--ease),border-color .18s var(--ease);}
.stat:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16);}
.stat .v{font-size:1.375rem;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat .l{color:var(--soft);font-size:0.75rem;margin-top:2px;}
.section-title{font-size:0.9375rem;font-weight:800;margin:18px 0 10px;}

/* ===== Barre de navigation : capsule flottante façon iOS ===== */
.tabbar{position:fixed;top:10px;left:12px;right:12px;margin:0 auto;max-width:960px;
  background:rgba(16,13,36,.72);backdrop-filter:blur(24px) saturate(1.6);-webkit-backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid rgba(255,255,255,.12);border-radius:999px;
  display:flex;justify-content:flex-start;align-items:center;gap:10px;padding:8px 10px 8px 16px;z-index:50;
  box-shadow:0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);}
.tabbar-hello{color:var(--soft);font-size:0.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tabbar-hello b{color:#fff;font-weight:800;}
.tab{background:transparent;border:1px solid transparent;color:var(--soft);font-family:inherit;font-size:0.8438rem;cursor:pointer;text-decoration:none;
  display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-weight:700;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .18s var(--ease);}
.tab .ic{font-size:1.0625rem;transition:transform .18s var(--ease);}
.tab:hover{color:#fff;background:rgba(255,255,255,.09);transform:translateY(-1px);}
.tab:hover .ic{transform:scale(1.15);}
.tab:active{transform:scale(.94);}
.tab.active{color:#fff;background:var(--grad-brand);border-color:transparent;box-shadow:0 6px 20px rgba(216,70,239,.42), inset 0 1px 0 rgba(255,255,255,.25);}
.tab.active:hover{transform:translateY(-1px);}
.tab.active .ic{transform:scale(1.08);}
.tab-back{position:static;color:var(--text);padding:8px 11px;background:rgba(255,255,255,.06);border:1px solid var(--line);}
.tab-av{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(255,255,255,.55);}
.tab-av-ph{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:#fff;background:var(--grad-brand);}
.acct-menu{position:fixed;z-index:60;width:300px;max-width:calc(100vw - 24px);background:rgba(13,11,32,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:6px;animation:acctpop .16s var(--ease);}
@keyframes acctpop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.acct-menu .acct-card{background:transparent;border:none;box-shadow:none;backdrop-filter:none;padding:18px 16px 6px;}
.acct-menu .acct-signout{margin-top:14px;}
.acct-menu-link{display:block;text-align:center;margin:8px 6px 6px;padding:11px;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;font-weight:700;font-size:0.875rem;transition:background .18s var(--ease);}
.acct-menu-link:hover{background:rgba(255,255,255,.12);}
.theme-seg{margin:10px 6px 2px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line);}
.theme-seg .ts-lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--soft);margin-bottom:8px;}
.theme-seg .ts-btns{display:flex;gap:6px;}
.theme-seg button{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--soft);font-family:inherit;font-weight:700;font-size:.8rem;padding:9px 4px;border-radius:11px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);}
.theme-seg button:hover{background:rgba(255,255,255,.09);}
.theme-seg button.on{background:var(--grad-brand);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(216,70,239,.35);}
/* Bandeau de co-édition (quiz partagé) */
.coedit-bar{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:48;
  background:rgba(255,138,0,.16);border:1px solid rgba(255,138,0,.4);color:#FFC46B;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:700;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;}
.coedit-bar b{color:#fff;}
body.light .coedit-bar{background:rgba(255,138,0,.14);color:#B35A00;}
body.light .coedit-bar b{color:#7A3D00;}
@media (max-width:560px){ .coedit-bar{ top:12px; } }
/* Lignes de la feuille de partage */
.sh-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);}
.sh-row:last-child{border-bottom:none;}
.sh-row .sh-mail{flex:1;font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sh-row .sh-del{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:none;cursor:pointer;background:rgba(239,68,68,.14);color:#F87171;font-weight:800;font-size:.75rem;}
.sh-row .sh-del:hover{background:rgba(239,68,68,.26);}
/* Statistiques de partie */
.st-sum{display:flex;gap:10px;margin:6px 0 14px;}
.st-sum > div{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:2px;}
.st-sum b{font-size:1.15rem;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.st-sum span{font-size:.7rem;color:var(--soft);font-weight:700;}
.st-top{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:.9rem;}
.st-top .st-nm{flex:1;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.st-list{margin-top:12px;display:flex;flex-direction:column;gap:12px;max-height:38vh;overflow-y:auto;padding-right:4px;}
.st-q .st-qt{font-size:.85rem;font-weight:700;margin-bottom:5px;}
.st-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;}
.st-fill{height:100%;border-radius:99px;background:var(--grad-brand);transition:width .6s var(--ease);}
.st-meta{font-size:.72rem;color:var(--soft);margin-top:4px;font-weight:600;}
body.light .st-sum > div{background:rgba(25,18,60,.04);}
body.light .st-bar{background:rgba(25,18,60,.08);}
/* Bannière « quiz partagé avec toi » */
.share-note{position:fixed;top:74px;left:50%;transform:translate(-50%,-14px);z-index:70;
  display:flex;align-items:center;gap:12px;max-width:min(94vw,480px);
  background:rgba(216,70,239,.16);border:1px solid rgba(216,70,239,.45);color:#fff;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  padding:11px 12px 11px 16px;border-radius:18px;font-size:.85rem;font-weight:600;
  box-shadow:0 14px 40px rgba(0,0,0,.4);opacity:0;transition:opacity .3s var(--ease),transform .35s cubic-bezier(.34,1.56,.64,1);}
.share-note.show{opacity:1;transform:translate(-50%,0);}
.share-note .sn-txt{flex:1;line-height:1.35;}
.share-note .sn-go{flex:0 0 auto;background:var(--grad-brand);color:#fff;text-decoration:none;font-weight:800;font-size:.8rem;padding:8px 15px;border-radius:999px;box-shadow:0 6px 16px rgba(216,70,239,.4);}
.share-note .sn-x{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:none;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:.7rem;font-weight:800;}
body.light .share-note{background:rgba(216,70,239,.10);color:var(--text);border-color:rgba(216,70,239,.35);}
body.light .share-note .sn-x{background:rgba(25,18,60,.10);color:var(--text);}
@media (max-width:560px){ .share-note{ top:12px; } }
/* Pastille de notification sur l'onglet Mes quiz */
.tab{position:relative;}
.tab.has-dot::after{content:"";position:absolute;top:6px;right:8px;width:8px;height:8px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 0 rgba(255,79,163,.55);animation:livedot 1.8s ease-out infinite;}
body.light .theme-seg{background:rgba(25,18,60,.04);}
body.light .theme-seg button{background:rgba(25,18,60,.04);}
body.light .theme-seg button:hover{background:rgba(25,18,60,.08);}
body.light .theme-seg button.on{color:#fff;}
.hidden{display:none;}
a.link{color:var(--blue);}

/* ===== Carte de compte façon Google (profil) ===== */
.acct-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 22px;
  box-shadow:var(--shadow-1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
.acct-av{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.18);box-shadow:0 6px 20px rgba(0,0,0,.4);}
.acct-av-ph{display:flex;align-items:center;justify-content:center;font-size:2.625rem;font-weight:800;color:#fff;background:var(--grad-brand);}
.acct-name{font-size:1.375rem;font-weight:800;margin-top:10px;}
.acct-email{color:var(--soft);font-size:0.875rem;}
.acct-badge{margin-top:8px;font-size:0.75rem;color:var(--soft);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:4px 12px;border-radius:999px;}
.acct-signout{margin-top:18px;background:rgba(255,255,255,.06);border:1px solid var(--line);color:#fff;font-family:inherit;font-weight:700;font-size:0.875rem;padding:11px 22px;border-radius:999px;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease);}
.acct-signout:hover{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.45);}

/* ===== Éditeur web pleine largeur + aperçu fidèle (creer.html) ===== */
body.editor-page .app{ max-width:1200px; }
.editor-layout{display:flex;gap:28px;align-items:flex-start;position:relative;}
.editor-col{flex:1;min-width:0;}
.preview-col{width:340px;flex:0 0 340px;}
.preview-sticky{position:fixed;top:84px;right:max(16px, calc((100vw - 1200px)/2 + 16px));width:340px;max-height:calc(100vh - 104px);overflow-y:auto;}
.preview-label{font-size:0.75rem;font-weight:800;color:var(--soft);margin-bottom:12px;text-align:center;text-transform:uppercase;letter-spacing:1.5px;}

/* --- maquette FIDÈLE à l'écran de jeu (mêmes styles que rejoindre.html) --- */
.pvg-card{background:rgba(10,8,25,.30);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:18px;box-shadow:0 10px 40px rgba(0,0,0,.45);}
.pvg-timer{width:64px;height:64px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;color:#fff;}
.pvg-media{width:100%;border-radius:16px;margin-bottom:16px;max-height:180px;object-fit:cover;}
.pvg-qtext{background:#fff;color:#1a1a2e;font-size:1.125rem;font-weight:800;text-align:center;padding:14px 14px;border-radius:16px;margin-bottom:16px;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.pvg-opts{display:flex;flex-direction:column;gap:10px;}
.pvg-opt{border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:14px;padding:15px 16px;font-size:1rem;font-weight:600;text-align:left;color:#fff;}
/* QCM façon Kahoot : barres colorées avec formes */
.pvg-kopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pvg-kopt{display:flex;align-items:center;gap:9px;border:none;border-radius:14px;padding:14px 12px;font-size:0.875rem;font-weight:800;text-align:left;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.25);cursor:pointer;min-height:54px;}
.pvg-kopt .pvg-kshape{font-size:1rem;line-height:1;flex:0 0 auto;}
.pvg-kopt .pvg-klabel{flex:1;}
.pvg-kopt.sel{outline:4px solid #fff;outline-offset:-2px;}
@media (max-width:420px){ .pvg-kopts{grid-template-columns:1fr;} }
.pvg-btn{width:100%;border:none;border-radius:18px;padding:16px;margin-top:18px;font-size:1rem;font-weight:800;color:#fff;text-align:center;box-shadow:0 0 30px rgba(255,45,149,.3);}
.pvg-slider-wrap{margin:10px 0;}
.pvg-slider-val{text-align:center;font-size:2rem;font-weight:800;margin-bottom:10px;color:#fff;}
.pvg-input{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.14);border-radius:14px;padding:15px 16px;color:var(--soft);font-size:0.9375rem;}
.pvg-wc{display:flex;flex-direction:column;gap:10px;}
.pvg-order{display:flex;flex-direction:column;gap:8px;}
.pvg-order-row{display:flex;align-items:center;gap:10px;border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:12px;padding:10px 12px;}
.pvg-lbl{flex:1;font-weight:600;color:#fff;}
.pvg-arrows{display:flex;flex-direction:column;gap:2px;color:rgba(255,255,255,.6);font-size:0.6875rem;}

/* sur petit écran : aperçu passe dessous, conteneur normal */
@media (max-width: 900px){
  body.editor-page .app{ max-width:560px; }
  .editor-layout{flex-direction:column;}
  .preview-col{width:100%;flex:none;}
  .preview-sticky{position:static;}
  .pvg-card{max-width:380px;margin:0 auto;}
}

/* ===== Mode test solo (panneau d'aperçu) ===== */
.pvg-top-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.pvg-qnum-badge{background:rgba(255,255,255,.15);color:#fff;font-weight:800;font-size:0.75rem;padding:4px 10px;border-radius:999px;}
.pvg-score-badge{color:#fff;font-weight:800;font-size:0.8125rem;}
.pvg-opt.sel{border-color:var(--pink);border-width:2.5px;background:rgba(255,79,163,.16);}
.pvg-opt{cursor:pointer;}
.pvg-realinput{width:100%;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.18);border-radius:14px;padding:14px 16px;color:#fff;font-family:inherit;font-size:0.9375rem;margin-bottom:6px;}
.pvg-btn{cursor:pointer;}
.pvg-btn-ghost{background:transparent !important;border:1.5px solid var(--line);box-shadow:none !important;margin-top:8px;}
.pvg-quit{text-align:center;color:var(--soft);font-size:0.75rem;margin-top:14px;cursor:pointer;}
.pvg-result{text-align:center;font-size:1.25rem;font-weight:800;margin:10px 0;}
.pvg-result-pts{text-align:center;font-size:1.625rem;font-weight:800;color:#fff;}
.pvg-result-sub{text-align:center;color:var(--soft);font-size:0.875rem;margin-top:6px;}
.pvg-end-score{text-align:center;font-size:2.75rem;font-weight:800;margin:8px 0;}
.pvg-end-sub{text-align:center;color:var(--soft);font-size:0.875rem;margin-bottom:10px;}
.pvg-arrows span{cursor:pointer;display:block;}

/* ===== Écran de début du test (décompte 5s, comme l'app) ===== */
.pvg-intro{position:relative;border-radius:24px;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 40px rgba(0,0,0,.45);}
.pvg-intro-veil{position:absolute;inset:0;background:rgba(5,8,22,.55);}
.pvg-intro-content{position:relative;text-align:center;padding:20px;}
.pvg-intro-mono{font-size:2.5rem;font-weight:800;color:#fff;margin-bottom:14px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.pvg-intro-count{font-size:6rem;font-weight:800;color:#fff;line-height:1;text-shadow:0 3px 14px rgba(0,0,0,.5);}
.pvg-intro-title{font-size:1.125rem;font-weight:800;color:#fff;margin-top:8px;text-shadow:0 2px 8px rgba(0,0,0,.5);}
.pvg-intro .pvg-quit{position:absolute;bottom:14px;left:0;right:0;}

/* ===== Accueil compact (index.html) : tient dans un écran, sans scroll ===== */
body.home .app{
  min-height:100dvh;
  padding:74px 16px 16px;
}
body.home .chars{ margin:0 0 -18px; }
body.home .chars img{
  width:64%;
  max-width:300px;
  max-height:18dvh;
  object-fit:contain;
}
body.home .cta{
  height:122px;
  margin-bottom:12px;
}
body.home .cta .ring{ width:90px;height:90px;border-radius:45px; }
body.home .cta .ring .inner{ width:80px;height:80px;border-radius:40px; }
body.home .cta .ring img{ width:68px;height:68px; }
body.home .cta .crowd{ height:66px; }
body.home .cta .txt .t{ font-size:1.25rem;line-height:22px; }
body.home .newcard{ padding:12px;margin-bottom:8px; }
body.home .signin{ margin-top:4px; }

/* ===== Marque "Quizzy Live" dans le bandeau du haut (toutes les pages) ===== */
.tabbar{ justify-content:flex-start; gap:12px; }
.tabbar-brand{
  display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--text); font-weight:800; font-size:1.125rem;
  flex:0 0 auto; letter-spacing:-.01em;
}
.tabbar-brand img{ width:30px; height:30px; transition:transform .3s var(--ease); }
.tabbar-brand:hover img{ transform:rotate(-8deg) scale(1.08); }
.tabbar-brand .live{ color:var(--orange); }
.tabbar-tabs{ display:flex; align-items:center; gap:8px; margin-left:auto; }

/* le bouton retour reste calé à gauche, la marque se décale alors un peu */
.tabbar .tab-back{ position:static; padding:8px 10px; }

/* écrans moyens : le "Bonjour" disparaît d'abord */
@media (max-width: 760px){
  .tabbar-hello{ display:none; }
}

/* ===== Mobile : la navigation passe EN BAS, façon barre d'onglets iOS ===== */
@media (max-width: 560px){
  .tabbar{
    top:auto; bottom:calc(10px + env(safe-area-inset-bottom));
    left:10px; right:10px; max-width:none;
    padding:7px 8px; gap:0;
    border-radius:26px;
  }
  .tabbar-brand, .tabbar-hello, .tabbar .tab-back{ display:none; }
  .tabbar-tabs{ margin:0; width:100%; gap:2px; }
  .tab{ flex:1; flex-direction:column; justify-content:center; gap:3px; padding:8px 4px; border-radius:18px; min-height:52px; }
  .tab .ic{ font-size:1.25rem; }
  .tab .lbl{ display:block; font-size:0.6562rem; font-weight:700; letter-spacing:.1px; }
  .tab-av,.tab-av-ph{ width:22px; height:22px; }
  .tab.active{ background:rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
  .tab.active .ic{ transform:scale(1.12); }
  .tab.active .lbl{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

  /* le contenu ne se cache plus derrière une barre en haut : on respire */
  .app{ padding:22px 16px calc(104px + env(safe-area-inset-bottom)); }
  body.home .app{ padding:16px 16px calc(104px + env(safe-area-inset-bottom)); }
  .preview-sticky{ top:16px; max-height:calc(100vh - 140px); }
  .toast{ top:14px; }
}

/* ===== Mes quiz en pleine largeur + grille de cartes ===== */
body.quizzes-page .app{ max-width:1200px; }
body.quizzes-page .filter-row{ max-width:1200px; }
body.quizzes-page .quizcard{ margin-bottom:0; }
body.quizzes-page #app{ display:block; }
body.quizzes-page .quiz-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:16px;
}
@media (max-width: 700px){
  body.quizzes-page .app{ max-width:560px; }
  body.quizzes-page .quiz-grid{ grid-template-columns:1fr; }
}

/* ===== Sélecteur de thèmes (éditeur) ===== */
.theme-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px,1fr));
  gap:10px; margin-top:8px;
}
.theme-card{
  position:relative; border:2px solid var(--line); border-radius:16px;
  height:74px; cursor:pointer; overflow:hidden; color:#fff; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
  transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.theme-card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.35); }
.theme-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.48)); }
.theme-card .theme-emoji{ font-size:1.375rem; position:relative; z-index:1; }
.theme-card .theme-name{ font-size:0.75rem; font-weight:800; position:relative; z-index:1; }
.theme-card.active{ border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 8px 24px rgba(0,0,0,.4); }
.theme-card:active{ transform:scale(.97); }
.theme-card-custom{ border-style:dashed; border-color:rgba(255,255,255,.45); }
.theme-card-custom::before{ background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.32)); }
.theme-del{ position:absolute; top:3px; right:5px; z-index:2; width:20px; height:20px; line-height:19px; text-align:center; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:0.75rem; font-weight:800; }
.theme-del:hover{ background:rgba(220,40,60,.9); }

/* ===== Transitions entre pages (fondu doux façon app native) ===== */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .18s ease both; }
::view-transition-new(root){ animation:vt-in .22s ease both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(8px); } }

/* ===== Squelettes de chargement (shimmer) ===== */
.skel{ position:relative; overflow:hidden; background:rgba(255,255,255,.06); border-radius:12px; }
.skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation:shimmer 1.4s infinite; }
@keyframes shimmer{ to{ transform:translateX(100%); } }
.skel-line{ height:14px; }
.skel-title{ height:26px; width:45%; }
.skel-cover{ height:130px; border-radius:0; }
.skel-quizcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.skel-quizcard .pad{ padding:14px; display:flex; flex-direction:column; gap:10px; }

/* ===== Toast (notification légère) ===== */
.toast{ position:fixed; top:74px; left:50%; transform:translate(-50%,-16px); z-index:80;
  display:flex; align-items:center; gap:9px; max-width:min(92vw,420px);
  background:rgba(16,13,36,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:11px 18px 11px 12px;
  color:#fff; font-weight:700; font-size:0.875rem; box-shadow:0 16px 44px rgba(0,0,0,.5);
  opacity:0; transition:opacity .3s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast .toast-ic{ width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8125rem; font-weight:900; flex:0 0 auto; }
.toast.success .toast-ic{ background:rgba(34,197,94,.25); color:#4ADE80; }
.toast.error .toast-ic{ background:rgba(239,68,68,.25); color:#F87171; }
.toast.info .toast-ic{ background:rgba(56,189,248,.22); color:#7DD3FC; }

/* ===== Feuille de confirmation (bottom sheet) ===== */
.sheet-wrap{ position:fixed; inset:0; z-index:90; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(4,3,12,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .28s ease; }
.sheet{ position:absolute; left:10px; right:10px; bottom:10px; margin:0 auto; max-width:480px;
  background:rgba(22,18,44,.97); -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.13); border-radius:28px; padding:10px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 50px rgba(0,0,0,.55); text-align:center;
  transform:translateY(110%); transition:transform .34s cubic-bezier(.32,.72,.28,1); }
.sheet-wrap.show .sheet-backdrop{ opacity:1; }
.sheet-wrap.show .sheet{ transform:translateY(0); }
.sheet-grab{ width:38px; height:5px; border-radius:99px; background:rgba(255,255,255,.22); margin:4px auto 12px; }
.sheet-emoji{ font-size:2.25rem; margin-bottom:6px; }
.sheet-title{ font-size:1.125rem; font-weight:800; letter-spacing:-.01em; }
.sheet-msg{ color:var(--soft); font-size:0.875rem; margin-top:5px; line-height:1.45; }
.sheet-btn{ display:block; width:100%; border:none; cursor:pointer; font-family:inherit;
  font-size:1rem; font-weight:800; color:#fff; padding:15px; border-radius:16px; margin-top:10px;
  transition:transform .18s var(--ease), opacity .18s var(--ease); }
.sheet-btn:active{ transform:scale(.97); }
.sheet-btn.primary{ background:var(--grad-brand); box-shadow:0 10px 26px rgba(216,70,239,.4); margin-top:16px; }
.sheet-btn.danger{ background:linear-gradient(135deg,#F43F5E,#DC2626); box-shadow:0 10px 26px rgba(239,68,68,.4); margin-top:16px; }
.sheet-btn.cancel{ background:rgba(255,255,255,.07); border:1px solid var(--line); color:var(--soft); }
.sheet-form{ text-align:left; max-height:88vh; overflow-y:auto; }
.sheet-form .sheet-emoji,.sheet-form .sheet-title,.sheet-form .sheet-msg{ text-align:center; }
.sheet-form label{ margin-top:14px; font-size:.85rem; }
.sheet-form .chips{ margin-top:8px; }
@media (min-width:700px){ .sheet{ bottom:auto; top:50%; transform:translateY(-40%) scale(.96); opacity:0; transition:transform .3s var(--ease), opacity .3s ease; border-radius:24px; }
  .sheet-wrap.show .sheet{ transform:translateY(-50%) scale(1); opacity:1; } }

/* ===== Mouvement réduit : on respecte la préférence système ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ===== Écrans tactiles : zones de toucher à 44px (norme Apple) ===== */
@media (pointer: coarse){
  .qtool{ width:44px; height:44px; border-radius:13px; font-size:1.05rem; }
  .opt-correct{ width:44px; height:44px; }
  .btn-small{ padding:11px 16px; min-height:44px; }
  .chip{ padding:11px 16px; min-height:44px; }
  .searchbar .s-clear{ width:30px; height:30px; font-size:.8rem; }
  .theme-del{ width:28px; height:28px; line-height:27px; font-size:.85rem; top:4px; right:6px; }
  .acct-signout{ min-height:44px; }
  .sheet-btn{ min-height:50px; }
  .gear{ padding:10px; }
}

/* ============================================================
   MODE CLAIR AUTOMATIQUE
   Suit le réglage du système. Les pages de jeu (body.game,
   rejoindre) restent sombres : elles vivent sur les images de thème.
   ============================================================ */
:root{ color-scheme:dark; }
@media all{
  body.light{
    color-scheme:light;
    --bg-top:#F5F3FC; --bg-bottom:#ECE9F8;
    --surface:#FFFFFF; --elevated:#F4F2FB;
    --card:rgba(255,255,255,.78); --card-solid:#FFFFFF;
    --text:#191532; --soft:#5E5A7E; --line:rgba(25,18,60,.10);
    --shadow-1:0 10px 30px rgba(40,30,90,.10);
    background:
      radial-gradient(1200px 620px at 72% -12%, rgba(139,92,246,.14), transparent 60%),
      radial-gradient(900px 520px at -6% 104%, rgba(56,189,248,.10), transparent 60%),
      linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  }
  body.light .app::before{ background:rgba(216,70,239,.10); }
  body.light .app::after{ background:rgba(56,189,248,.08); }

  /* Navigation */
  body.light .tabbar{ background:rgba(255,255,255,.78); box-shadow:0 10px 34px rgba(40,30,90,.14), inset 0 1px 0 rgba(255,255,255,.7); }
  body.light .tabbar-hello b{ color:var(--text); }
  body.light .tab:hover{ color:var(--text); background:rgba(25,18,60,.06); }
  body.light .tab.active{ color:#fff; }
  body.light .tab.active .lbl{ -webkit-text-fill-color:initial; background:none; color:#fff; }
  body.light .tab-back{ color:var(--text); background:rgba(25,18,60,.05); }

  /* Boutons, champs, contrôles */
  body.light .btn-ghost{ background:rgba(25,18,60,.05); color:var(--text); }
  body.light .btn-ghost:hover{ background:rgba(25,18,60,.09); }
  body.light input, body.light select, body.light textarea{ background:rgba(25,18,60,.045); }
  body.light input:focus, body.light select:focus, body.light textarea:focus{ background:#fff; }
  body.light input::placeholder, body.light textarea::placeholder{ color:rgba(25,18,60,.38); }
  body.light .chip{ background:rgba(25,18,60,.05); }
  body.light .chip:hover{ background:rgba(25,18,60,.09); }
  body.light .chip.active{ color:#fff; }
  body.light .qtool{ background:rgba(25,18,60,.05); color:var(--text); }
  body.light .qtool:hover{ background:rgba(25,18,60,.10); }
  body.light .opt-correct{ background:rgba(25,18,60,.04); color:var(--text); }
  body.light .opt-correct.on{ color:#fff; }
  body.light .searchbar{ background:rgba(25,18,60,.05); }
  body.light .searchbar .s-clear{ background:rgba(25,18,60,.14); color:var(--text); }
  body.light .newcard{ background:rgba(25,18,60,.04); color:var(--text); }
  body.light .newcard:hover{ background:rgba(25,18,60,.07); }
  body.light .newcard .badge-new{ color:#fff; }
  body.light .newcard .ns{ color:var(--soft); }
  body.light .gear{ color:rgba(25,18,60,.6); }
  body.light .signin{ color:var(--soft); }

  /* Squelettes */
  body.light .skel{ background:rgba(25,18,60,.08); }
  body.light .skel::after{ background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); }

  /* Toasts & feuilles */
  body.light .toast{ background:rgba(255,255,255,.96); color:var(--text); border-color:rgba(25,18,60,.10); box-shadow:0 16px 44px rgba(40,30,90,.2); }
  body.light .sheet{ background:rgba(255,255,255,.98); box-shadow:0 -12px 50px rgba(40,30,90,.22); border-color:rgba(25,18,60,.10); }
  body.light .sheet-grab{ background:rgba(25,18,60,.2); }
  body.light .sheet-btn.cancel{ background:rgba(25,18,60,.06); color:var(--soft); }

  /* Compte & profil */
  body.light .acct-menu{ background:rgba(255,255,255,.98); }
  body.light .acct-menu-link{ background:rgba(25,18,60,.05); color:var(--text); }
  body.light .acct-menu-link:hover{ background:rgba(25,18,60,.09); }
  body.light .acct-badge{ background:rgba(25,18,60,.05); }
  body.light .acct-signout{ background:rgba(25,18,60,.05); color:var(--text); }
  body.light .acct-av{ border-color:rgba(25,18,60,.12); }
  body.light .hero .ava{ border-color:rgba(25,18,60,.08); }
  body.light .barbg{ background:rgba(25,18,60,.08); }

  /* L'aperçu de jeu dans l'éditeur reste sombre (il imite l'écran de jeu) */
}

/* ===== Mode clair automatique (suit le réglage système) =====
   Les écrans de JEU (rejoindre/host) restent sombres : ils vivent
   sur les images de thème, comme un mode projection. */
@media all{
  body.light{
    --bg-top:#F6F4FC; --bg-bottom:#EDEAF8;
    --surface:#FFFFFF; --elevated:#F3F0FB;
    --card:rgba(255,255,255,.72); --card-solid:#FFFFFF;
    --text:#1B1440; --soft:#5E5980; --line:rgba(27,20,64,.10);
    --shadow-1:0 10px 34px rgba(27,20,64,.10);
  body.light }
  body{
    background:
      radial-gradient(1200px 620px at 72% -12%, rgba(139,92,246,.14), transparent 60%),
      radial-gradient(900px 520px at -6% 104%, rgba(255,79,163,.10), transparent 60%),
      linear-gradient(180deg,var(--bg-top),var(--bg-bottom));
  body.light }
  ::selection{background:rgba(216,70,239,.22);color:var(--text);}
  body.light ::-webkit-scrollbar-thumb{background:rgba(27,20,64,.18);border:3px solid transparent;background-clip:content-box;}
  body.light .app::before{background:rgba(216,70,239,.10);}
  body.light .app::after{background:rgba(56,189,248,.10);}

  body.light .btn-ghost{background:rgba(27,20,64,.05);color:var(--text);}
  body.light .btn-ghost:hover{background:rgba(27,20,64,.09);}
  body.light input, body.light select, body.light textarea{background:rgba(27,20,64,.045);color:var(--text);}
  body.light input:focus, body.light select:focus, body.light textarea:focus{background:#fff;}
  body.light input::placeholder, body.light textarea::placeholder{color:rgba(27,20,64,.4);}
  body.light .chip{background:rgba(27,20,64,.05);}
  body.light .chip:hover{background:rgba(27,20,64,.09);}
  body.light .chip.active{color:#fff;}
  body.light .opt-correct{background:rgba(27,20,64,.05);color:var(--text);}
  body.light .opt-correct.on{color:#fff;}
  body.light .qtool{background:rgba(27,20,64,.05);color:var(--text);}
  body.light .qtool:hover{background:rgba(27,20,64,.10);}
  body.light .newcard{background:rgba(27,20,64,.045);}
  body.light .newcard:hover{background:rgba(27,20,64,.08);}
  body.light .newcard .ns{color:var(--soft);}
  body.light .signin{color:var(--soft);}
  body.light .barbg{background:rgba(27,20,64,.10);}
  body.light .stat:hover{border-color:rgba(27,20,64,.2);}
  body.light .quizcard .cover{background:#E4E0F2;}

  body.light .tabbar{background:rgba(255,255,255,.72);border-color:rgba(27,20,64,.10);
    box-shadow:0 14px 40px rgba(27,20,64,.14), inset 0 1px 0 rgba(255,255,255,.7);}
  body.light .tab:hover{color:var(--text);background:rgba(27,20,64,.06);}
  body.light .tab.active{color:#fff;}
  body.light .tabbar-hello b{color:var(--text);}
  body.light .tab-back{color:var(--text);background:rgba(27,20,64,.05);}

  body.light .acct-menu{background:rgba(255,255,255,.97);}
  body.light .acct-menu-link{background:rgba(27,20,64,.05);color:var(--text);}
  body.light .acct-menu-link:hover{background:rgba(27,20,64,.09);}
  body.light .acct-badge{background:rgba(27,20,64,.05);}
  body.light .acct-signout{background:rgba(27,20,64,.05);color:var(--text);}

  body.light .toast{background:rgba(255,255,255,.94);border-color:rgba(27,20,64,.12);color:var(--text);
    box-shadow:0 16px 44px rgba(27,20,64,.2);}
  body.light .sheet{background:rgba(255,255,255,.98);border-color:rgba(27,20,64,.10);
    box-shadow:0 -12px 50px rgba(27,20,64,.22);}
  body.light .sheet-grab{background:rgba(27,20,64,.18);}
  body.light .sheet-btn.cancel{background:rgba(27,20,64,.06);}
  body.light .sheet-backdrop{background:rgba(27,20,64,.28);}

  body.light .skel{background:rgba(27,20,64,.07);}
  body.light .skel::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);}
  body.light .skel-quizcard{background:var(--card);}
  body.light .searchbar{background:#fff;border-color:rgba(27,20,64,.12);}
  body.light .searchbar .s-clear{background:rgba(27,20,64,.14);color:var(--text);}
  body.light .searchbar .s-clear:hover{background:rgba(27,20,64,.24);}
  body.light .theme-card{border-color:rgba(27,20,64,.15);}
}

/* ===== Grand écran (PC) : les pages respirent ===== */
@media (min-width: 900px){
  .app{ max-width:680px; padding-top:96px; }           /* pages génériques (profil, connexion…) */
  h1{ font-size:2.125rem; }
  .statsgrid{ grid-template-columns:repeat(4,1fr); }    /* stats du profil sur une rangée */
  .acct-card{ padding:34px 26px; }
  .hero{ padding:30px; }
  body.editor-page .app{ max-width:1200px; }            /* l'éditeur garde sa pleine largeur */
  body.quizzes-page .app{ max-width:1200px; }           /* la grille Mes quiz aussi */
  body.home .app{ max-width:1040px; }                   /* l'accueil garde son layout 2 colonnes */
}

/* ===== Mobile : les notifications restent en haut (encoche respectée) ===== */
@media (max-width:560px){
  .toast{ top:calc(10px + env(safe-area-inset-top)); }
  .share-note{ top:calc(10px + env(safe-area-inset-top)); }
  .coedit-bar{ top:calc(10px + env(safe-area-inset-top)); }
}