/* =========================================================
   Maliden — app citoyenne (MVP) · CSS repris du prototype validé
   0. POLICES (hébergées avec l'app, gardées hors ligne : ≈ 64 Ko une seule fois)
   ========================================================= */
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../polices/poppins-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(../polices/poppins-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../polices/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../polices/inter-latin-600-normal.woff2) format('woff2')}

/* =========================================================
   1. VARIABLES — design system (noir olive + vert citron, palette choisie le 16/10/2026)
   ========================================================= */
@property --split { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
:root{
  --dark:#0D0F0A; --dark-2:#141710; --dark-3:#252722; --dark-4:#30332C;   /* noirs légèrement olive */
  --accent-rgb:212,240,94;                       /* vert citron en R,G,B (pour les transparences) */
  --accent:rgb(var(--accent-rgb)); --accent-light:#E2F3A0; --accent-dark:#9DB548;
  --white:#FFFFFF; --text-2:#C9CBC3; --muted:#8A8D83;
  --border:rgba(var(--accent-rgb),.12); --line:rgba(255,255,255,.06);
  --ok-rgb:150,214,120; --ok:rgb(var(--ok-rgb)); --ok-light:#C4EBAE; --ok-bg:rgba(var(--ok-rgb),.14);             /* vert : vérifié / réussi */
  --alert-rgb:212,98,94; --alert:rgb(var(--alert-rgb)); --alert-light:#EFA29E; --alert-bg:rgba(var(--alert-rgb),.14); /* rouge : problème / alerte */
  --fond-app:radial-gradient(130% 55% at 15% 0%,rgba(150,178,60,.24) 0%,transparent 60%),linear-gradient(180deg,#1A1E12 0%,#0D0F0A 70%); /* fond des écrans : lueur olive en haut */
  --tabbar:#0B0D09; --sheet-bg:rgba(28,31,24,.96);
  --tint:#283018; --tint-2:#232A16;              /* départ des dégradés des cartes « mois », « prix », « niveau » */
  --card-border:rgba(255,255,255,.04);           /* contour des cartes et des choix au repos (presque invisible) */
  --sel-bg:rgba(var(--accent-rgb),.42);          /* fond d'un choix sélectionné (vert olive doux) */
  --glow:0;                                      /* intensité des lueurs autour des boutons (0 = aucune) */
  --hl-border:rgba(var(--accent-rgb),.22);      /* contour des cartes mises en avant (mois, prix, niveau) */
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --font-title:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-body:'Inter','DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-accent:'Playfair Display',Georgia,serif;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--dark);color:var(--white);font:400 15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-title);margin:0;line-height:1.15;letter-spacing:-.01em}
p{margin:0}
.ico{width:22px;height:22px;flex-shrink:0}
.label{display:inline-block;font:700 11px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Scène : sur téléphone l'app occupe tout l'écran ; sur ordinateur, elle garde le format d'un téléphone */
.stage{min-height:100dvh;display:flex;align-items:center;justify-content:center}
.device{position:relative;width:100%;height:100dvh;overflow:hidden;overflow:clip;background:var(--fond-app);isolation:isolate}
@media (min-width:700px){
  .stage{padding:20px;background:radial-gradient(900px 640px at 50% 40%,rgba(var(--accent-rgb),.08),transparent 62%),var(--dark)}
  .device{width:400px;height:min(860px,calc(100dvh - 40px));border-radius:36px;border:1px solid rgba(var(--accent-rgb),.35);box-shadow:0 0 0 8px #151515,0 30px 80px rgba(0,0,0,.7)}
}

/* =========================================================
   3. STRUCTURE DE L'APP + BARRE D'ONGLETS
   ========================================================= */
.app{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;overflow:clip}
.view{position:relative;flex:1;min-height:0;overflow:hidden;overflow:clip}
.screen{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.pad{padding:22px 18px 40px}
.tabbar{position:relative;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;height:70px;background:var(--tabbar);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
.tabbar[hidden]{display:none}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;font-weight:600;color:var(--muted);transition:color .2s}
.tab .ico{width:24px;height:24px}
.tab.on{color:var(--accent)}
.tab .plus{width:56px;height:40px;border-radius:12px;background:var(--accent);color:var(--dark);display:grid;place-items:center;box-shadow:0 0 22px rgba(var(--accent-rgb),calc(.35*var(--glow)));transition:transform .2s,background .2s}
.tab .plus .ico{width:26px;height:26px;stroke-width:2.6}
.tab:hover .plus{background:var(--accent-light)}
.tab:active .plus{transform:scale(.94)}
.dotq{position:absolute;top:4px;left:50%;margin-left:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--alert);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center}

/* =========================================================
   4. FIL D'ACTUALITÉ (style TikTok)
   ========================================================= */
.feedwrap{overflow:hidden;overflow:clip}
.feed{position:absolute;inset:0;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.feed::-webkit-scrollbar{display:none}
.feed-top{position:absolute;z-index:6;left:0;right:0;top:0;padding:14px 14px 0;pointer-events:none}
.feed-top > *{pointer-events:auto}
.ft-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo-sm{width:34px;height:34px}
.scopes{display:flex;gap:2px;padding:4px;border-radius:999px;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1)}
.scopes button{height:32px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--text-2);transition:background .2s,color .2s}
.scopes button.on{background:var(--accent);color:var(--dark)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);color:var(--white)}
.icon-btn.solid{background:var(--dark-3);border-color:var(--border);color:var(--accent)}
.ft-row2{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12)}
.pill .ico{width:15px;height:15px}
.pill.gold{color:var(--accent-light);border-color:rgba(var(--accent-rgb),.45)}
.pill.off{background:rgba(var(--alert-rgb),.85);border-color:transparent;color:#fff}

.card{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;overflow:clip;background:var(--dark-2)}
.media{position:absolute;inset:0;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.media.hint{animation:hint 2.4s ease-in-out .5s 1}
@keyframes hint{0%{--split:50%}30%{--split:18%}68%{--split:82%}100%{--split:50%}}
.layer{position:absolute;inset:0}
.layer svg,.layer img{width:100%;height:100%;display:block;object-fit:cover}
.layer.before{filter:saturate(.4) sepia(.28) brightness(.78)}
.layer.after{clip-path:inset(0 0 0 var(--split))}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 46%,rgba(0,0,0,.88) 100%)}
.ft-sp{width:40px;flex-shrink:0}
.scopes .vis-only{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;font-size:13px;font-weight:600;background:var(--accent);color:var(--dark)}
.feedwrap.off .tagba{top:104px}
.feedwrap.off .flagbtn{top:140px}
.tagba{position:absolute;top:68px;z-index:2;font:700 10.5px/1 var(--font-body);letter-spacing:.18em;padding:6px 9px;border-radius:6px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.tagba.l{left:14px;color:#ddd}
.tagba.r{right:14px;color:var(--accent-light)}
.handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:44px;margin-left:-22px;touch-action:none;cursor:ew-resize;outline:none}
.handle::before{content:"";position:absolute;top:0;bottom:0;left:21px;width:2px;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),calc(.8*var(--glow)))}
.grip{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--dark);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.45)}
.grip .ico{width:16px;height:16px;stroke-width:3}
.handle:focus-visible .grip{outline:3px solid var(--white)}

.info{position:absolute;z-index:4;left:16px;right:84px;bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14)}
.chip .ico{width:14px;height:14px}
.chip.ok{color:var(--ok-light);border-color:rgba(var(--ok-rgb),.45)}
.chip.wait{color:var(--accent-light);border-color:rgba(var(--accent-rgb),.45)}
.chip.mine{background:var(--accent);color:var(--dark);border-color:transparent}
.ttl{font-size:19px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6);margin-bottom:10px}
.author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.av{width:38px;height:38px;border-radius:50%;background:var(--dark);border:1.5px solid var(--accent);display:grid;place-items:center;flex-shrink:0}
.av svg{width:28px;height:28px}
.author b{display:block;font-size:14px;line-height:1.2}
.author span{font-size:12px;color:var(--accent-light)}
.meta{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);margin-bottom:10px}
.meta .ico{width:14px;height:14px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.voice,.vid{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px 0 5px;border-radius:999px;background:rgba(var(--accent-rgb),.18);backdrop-filter:blur(8px);border:1px solid rgba(var(--accent-rgb),.5);color:var(--accent-light);font-weight:600;font-size:13px}
.vid{padding:0 14px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.2);color:var(--white)}
.vplay{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--dark);display:grid;place-items:center}
.vplay .ico{width:14px;height:14px}
.wave{display:flex;align-items:center;gap:2px;height:16px}
.wave i{display:block;width:3px;height:6px;border-radius:2px;background:currentColor}
.wave i:nth-child(2){height:12px}.wave i:nth-child(3){height:16px}.wave i:nth-child(4){height:10px}
.card.playing .wave i{animation:wave .8s ease-in-out infinite}
.card.playing .wave i:nth-child(2){animation-delay:.1s}.card.playing .wave i:nth-child(3){animation-delay:.2s}.card.playing .wave i:nth-child(4){animation-delay:.3s}.card.playing .wave i:nth-child(5){animation-delay:.4s}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1.2)}}
.meta2{margin-top:10px;font-size:12px;color:var(--muted)}

.rail{position:absolute;z-index:4;right:10px;bottom:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.act small{font-size:10px;font-weight:600;color:var(--text-2)}
.bub{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);transition:transform .15s,background .2s,border-color .2s}
.bub.em{font-size:25px}
.bub .ico{width:25px;height:25px}
.act:active .bub{transform:scale(.9)}
.act.on .bub{background:rgba(var(--accent-rgb),.28);border-color:var(--accent);color:var(--accent-light)}
.act.on b{color:var(--accent-light)}
.act.locked .bub{opacity:.75}
.flagbtn{position:absolute;z-index:4;right:12px;top:104px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);font-size:17px;transition:background .2s,border-color .2s}
.flagbtn.on{background:rgba(var(--alert-rgb),.32);border-color:var(--alert)}
.lockb{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;border-radius:50%;background:var(--dark-3);border:1px solid var(--border);display:grid;place-items:center;color:var(--accent)}
.lockb .ico{width:12px;height:12px}
.ring{width:52px;height:52px}
.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.25)}}

.empty-card{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 28px;text-align:center;background:radial-gradient(420px 320px at 50% 40%,rgba(var(--accent-rgb),.12),transparent 70%)}
.empty-card .big{font-size:56px}
.empty-card p{color:var(--text-2)}

/* Applaudissements : explosion */
.burst{position:absolute;z-index:80;pointer-events:none;font-size:64px;transform:translate(-50%,-50%);animation:burst .9s ease-out forwards}
.spark{position:absolute;z-index:80;pointer-events:none;font-size:20px;animation:spark .9s ease-out forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.3) rotate(-15deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15) rotate(8deg);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-140%) scale(.9);opacity:0}}
@keyframes spark{0%{transform:translate(0,0) scale(.5);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* =========================================================
   5. ÉCRANS SECONDAIRES (Besoins, Palmarès, Moi)
   ========================================================= */
.scr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}
.scr-head h1{font-size:30px;font-weight:800;margin-top:8px}
.sub{color:var(--muted);font-size:13px;margin-top:4px}
.box{background:var(--dark-3);border:1px solid var(--card-border);border-radius:16px;padding:16px}
.h3{font-size:17px;font-weight:700;margin:26px 0 12px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--dark-3);border:1px solid var(--line);margin-bottom:16px}
.seg button{height:40px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text-2)}
.seg button.on{background:var(--accent);color:var(--dark)}

/* Besoins */
.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat{padding:12px 10px;border-radius:14px;background:var(--dark-3);border:1px solid var(--line);text-align:center}
.stat b{display:block;font:800 24px/1.1 var(--font-title)}
.stat span{font-size:11px;color:var(--muted);font-weight:600}
.stat.r b{color:var(--alert)}.stat.g b{color:var(--accent)}.stat.v b{color:var(--ok)}
.minimap{position:relative;height:150px;border-radius:16px;overflow:hidden;background:#161616;border:1px solid var(--line);margin-bottom:14px}
.minimap svg{width:100%;height:100%;display:block}
.mm-label{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--muted)}
.steps4{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:12px;border-radius:14px;background:rgba(var(--accent-rgb),.06);border:1px dashed rgba(var(--accent-rgb),.3);margin-bottom:6px;font-size:11px;font-weight:600;color:var(--text-2);text-align:center}
.steps4 div{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.steps4 .em{font-size:20px}
.steps4 .arr{flex:0;color:var(--accent)}
.need{display:flex;gap:12px;padding:14px;border-radius:16px;background:var(--dark-3);border:1px solid var(--card-border);margin-bottom:10px}
.nic{width:50px;height:50px;border-radius:14px;background:var(--dark-4);display:grid;place-items:center;font-size:26px;flex-shrink:0}
.need h4{margin:0 0 4px;font:600 15px/1.3 var(--font-title)}
.need .nm{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.st{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700}
.st.signale{background:var(--alert-bg);color:var(--alert-light)}
.st.adopte{background:rgba(var(--accent-rgb),.16);color:var(--accent-light)}
.st.resolu{background:var(--ok-bg);color:var(--ok-light)}
.nact{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.mini{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;border:1px solid var(--border);background:transparent;color:var(--white)}
.mini.on{background:var(--sel-bg);border-color:var(--accent);color:var(--accent-light)}
.mini.gold{background:var(--accent);color:var(--dark);border-color:transparent}
.mini .ico{width:16px;height:16px}

/* Palmarès */
.prize{position:relative;overflow:hidden;padding:18px;border-radius:18px;background:linear-gradient(135deg,var(--tint) 0%,var(--dark-3) 55%);border:1px solid var(--hl-border)}
.prize::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(var(--accent-rgb),.3),transparent 70%)}
.prize h3{font-size:18px;margin:8px 0 6px}
.prize p{font-size:13px;color:var(--text-2)}
.cd{display:flex;gap:8px;margin-top:14px}
.cd div{min-width:58px;padding:8px 6px;border-radius:10px;background:rgba(0,0,0,.4);text-align:center}
.cd b{display:block;font:800 20px/1 var(--font-title);color:var(--accent-light)}
.cd span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.fine{font-size:11px;color:var(--muted);margin-top:10px}
.rank{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.rank li button{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--dark-3);border:1px solid var(--card-border);text-align:left;transition:border-color .2s,transform .2s}
.rank li button:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--accent-rgb),calc(.08*var(--glow)))}
.rk{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 14px var(--font-title);background:var(--dark-4);color:var(--text-2);flex-shrink:0}
.rk.r1{background:var(--accent);color:var(--dark)}.rk.r2{background:#C9CED6;color:var(--dark)}.rk.r3{background:#B07A4A;color:var(--dark)}
.thumb{width:54px;height:54px;border-radius:12px;overflow:hidden;flex-shrink:0}
.thumb svg,.thumb img{width:100%;height:100%;display:block;object-fit:cover}
.rinfo{flex:1;min-width:0}
.rinfo b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 14px/1.3 var(--font-title)}
.rinfo span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{height:6px;border-radius:3px;background:var(--dark-4);margin-top:7px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-dark),var(--accent-light));width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.score{font:800 20px/1 var(--font-title);color:var(--accent-light);text-align:right;flex-shrink:0}
.score small{display:block;font:600 10px var(--font-body);color:var(--muted);margin-top:3px}
.rinfo .fin{display:inline-block;margin-top:4px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--dark);background:var(--accent);padding:2px 6px;border-radius:4px}
.coeur{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:16px;background:rgba(var(--alert-rgb),.08);border:1px solid rgba(var(--alert-rgb),.25)}
.coeur .em{font-size:28px}
.coeur b{display:block;font-size:14px}
.coeur span{font-size:12px;color:var(--text-2)}
details.explain{margin-top:14px;border-radius:16px;background:var(--dark-3);border:1px solid var(--line);overflow:hidden}
details.explain summary{list-style:none;cursor:pointer;padding:16px;font:600 15px var(--font-title);display:flex;justify-content:space-between;align-items:center}
details.explain summary::-webkit-details-marker{display:none}
details.explain summary::after{content:"+";font-size:22px;color:var(--accent)}
details.explain[open] summary::after{content:"–"}
.ex-body{padding:0 16px 16px;font-size:13px;color:var(--text-2);display:grid;gap:10px}
.ex-row{display:flex;gap:10px;align-items:flex-start}
.ex-row .em{font-size:20px;width:26px;text-align:center}
.ex-row b{color:var(--white)}

/* Moi / Cursus citoyen */
.me-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.me-av{width:64px;height:64px;border-radius:50%;background:var(--dark-3);border:2px solid var(--accent);display:grid;place-items:center;box-shadow:0 0 24px rgba(var(--accent-rgb),calc(.25*var(--glow)))}
.me-av svg{width:46px;height:46px}
.me-head h1{font-size:24px;font-weight:800}
.lvl-card{position:relative;overflow:hidden;padding:20px;border-radius:20px;background:linear-gradient(160deg,var(--tint-2),var(--dark-2) 60%);border:1px solid var(--hl-border)}
.lvl-top{display:flex;align-items:center;gap:16px}
.lvl-ico{width:76px;height:76px;flex-shrink:0;filter:drop-shadow(0 0 14px rgba(var(--accent-rgb),.35))}
.lvl-name{font:800 30px/1 var(--font-title);margin-top:6px}
.lvl-pts{margin-top:4px;color:var(--accent-light);font-weight:600}
.prog{height:10px;border-radius:5px;background:rgba(255,255,255,.08);margin-top:18px;overflow:hidden}
.prog i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--accent-dark),var(--accent-light));transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.prog-txt{font-size:12px;color:var(--text-2);margin-top:8px}
.cursus{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin:22px 4px 4px}
.cursus::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:rgba(255,255,255,.1)}
.cursus .fillline{position:absolute;left:22px;top:22px;height:2px;background:var(--accent);transition:width 1s}
.cnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;text-align:center}
.cnode .c{width:46px;height:46px;border-radius:50%;background:var(--dark-2);border:1.5px solid rgba(255,255,255,.12);display:grid;place-items:center}
.cnode .c svg{width:30px;height:30px;opacity:.35;filter:grayscale(1)}
.cnode b{font-size:11px;color:var(--muted)}
.cnode small{font-size:9.5px;color:var(--muted)}
.cnode.done .c{border-color:var(--accent-dark)}
.cnode.done .c svg{opacity:1;filter:none}
.cnode.cur .c{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),calc(.18*var(--glow))),0 0 20px rgba(var(--accent-rgb),calc(.35*var(--glow)))}
.cnode.cur b,.cnode.done b{color:var(--white)}
.perks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.perks li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--text-2)}
.perks li .ico{width:18px;height:18px;color:var(--ok)}
.perks li.lock{color:var(--muted)}
.perks li.lock .ico{color:var(--muted)}
.tokens{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tk{display:flex;gap:6px}
.tk i{width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),calc(.5*var(--glow)))}
.tk i.off{background:var(--dark-4);box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.stats4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.stats4 .stat{text-align:left;padding:14px}
.stats4 .stat b{color:var(--accent-light)}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:var(--dark-3);border:1px solid var(--card-border);text-align:center;font-size:11px;font-weight:600}
.badge .em{font-size:30px}
.badge.lock{opacity:.4;filter:grayscale(1)}
.myacts{display:grid;gap:10px}
.set{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.set:last-child{border-bottom:0}
.set b{display:block;font-size:14px}
.set span{font-size:12px;color:var(--muted)}
.sw{position:relative;width:52px;height:30px;border-radius:15px;background:var(--dark-4);border:1px solid rgba(255,255,255,.12);flex-shrink:0;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#bbb;transition:transform .2s,background .2s}
.sw.on{background:var(--accent)}
.sw.on::after{transform:translateX(22px);background:var(--dark)}

/* =========================================================
   6. COMPOSANTS GLOBAUX (boutons, feuilles, choix, formulaires)
   ========================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:var(--radius-sm);font:600 16px var(--font-title);transition:background .2s,box-shadow .2s,transform .15s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn-gold{background:var(--accent);color:var(--dark)}
.btn-gold:hover{background:var(--accent-light);box-shadow:0 0 26px rgba(var(--accent-rgb),calc(.45*var(--glow)))}
.btn-ghost{border:1px solid var(--border);color:var(--white)}
.btn-ghost:hover{border-color:var(--accent)}
.btn-block{width:100%}
.btn[disabled]{opacity:.35;pointer-events:none}
.link{color:var(--accent-light);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}

.scrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:41;max-height:90%;overflow-y:auto;padding:10px 20px 26px;border-radius:26px 26px 0 0;background:var(--sheet-bg);backdrop-filter:blur(20px);border-top:1px solid var(--border);transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);scrollbar-width:none}
.sheet.open{transform:none}
.grab{width:42px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 14px}
.sh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:16px}
.sh-head h3{font-size:21px;font-weight:700;margin-top:8px}
.sh-txt{color:var(--text-2);font-size:14px;margin-bottom:16px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices.c3{grid-template-columns:repeat(3,1fr)}
.choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:106px;padding:12px 8px;border-radius:16px;background:var(--dark-3);border:1.5px solid var(--card-border);font-weight:600;font-size:14px;line-height:1.25;text-align:center;transition:transform .15s,border-color .2s,background .2s}
.choice .em{font-size:36px;line-height:1}
.choice:hover{border-color:var(--accent)}
.choice:active{transform:scale(.96)}
.choice.sel{border-color:var(--accent);background:var(--sel-bg)}
.qcount{display:flex;gap:6px;margin-bottom:6px}
.qcount i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.14)}
.qcount i.on{background:var(--accent)}
.big-ico{width:84px;height:84px;margin:4px auto 14px;border-radius:50%;display:grid;place-items:center;font-size:40px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.35);color:var(--accent)}
.big-ico .ico{width:38px;height:38px}
.big-ico.ok{background:var(--ok-bg);border-color:rgba(var(--ok-rgb),.4);color:var(--ok)}
.center{text-align:center}
.mrow{margin-bottom:14px}
.mrow .top{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;margin-bottom:6px}
.mrow .top span{color:var(--accent-light)}
.mrow p{font-size:12px;color:var(--muted);margin-top:5px}
.vh{font:700 15px var(--font-title);margin:22px 0 12px;padding-top:16px;border-top:1px solid var(--line)}
.waves{display:grid;gap:8px;margin:6px 0 4px}
.wv{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--dark-3);border:1px solid var(--line);opacity:.55}
.wv.on{opacity:1;border-color:rgba(var(--accent-rgb),.35)}
.wv > span{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;background:var(--dark-4);flex-shrink:0}
.wv.on > span{background:var(--accent);color:var(--dark)}
.wv b{display:block;font-size:14px}
.wv small{font-size:12px;color:var(--muted)}
.bub.sc{flex-direction:column;gap:0;background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.55)}
.bub.sc b{font:800 14px/1 var(--font-title);color:var(--accent-light)}
.bub.sc i{font-style:normal;font-size:9px;font-weight:700;color:var(--text-2);letter-spacing:.05em}
.bub.sc{display:flex;align-items:center;justify-content:center}
.stotal{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.stotal b{font:800 44px/1 var(--font-title);color:var(--accent-light)}
.stotal span{color:var(--text-2);font-weight:600}
.sline{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.sline .em{font-size:20px;width:26px;text-align:center}
.sline div{flex:1;min-width:0}
.sline b{display:block;font-size:14px}
.sline small{font-size:12px;color:var(--muted)}
.sline .pts{font:800 16px var(--font-title);color:var(--accent-light)}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ladder li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--dark-3);border:1px solid var(--line);opacity:.55}
.ladder li.done{opacity:.85}
.ladder li.cur{opacity:1;border-color:var(--accent);background:var(--sel-bg)}
.ladder .ln{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--font-title);background:var(--dark-4);flex-shrink:0}
.ladder li.cur .ln,.ladder li.done .ln{background:var(--accent);color:var(--dark)}
.ladder b{flex:1;font-size:14px}
.ladder small{font-size:12px;color:var(--muted)}
.cms{display:grid;gap:12px;max-height:44vh;overflow-y:auto;margin-bottom:14px;padding-right:2px}
.cm{display:flex;gap:10px;align-items:flex-start}
.av.sm{width:32px;height:32px;flex-shrink:0}
.av.sm svg{width:22px;height:22px}
.cm-b{flex:1;min-width:0;padding:10px 12px;border-radius:14px;background:var(--dark-3);border:1px solid var(--line)}
.cm-b b{font-size:13px}
.cm-b small{font-size:11px;color:var(--muted);margin-left:6px}
.cm-b p{margin:4px 0 0;font-size:14px;color:var(--text-2)}
.cm-b .mini{margin-top:6px}
.cm-main{flex:1;min-width:0}
.cm-rep{margin:4px 0 0 12px;font-size:12px;font-weight:700;color:var(--muted)}
.cm-rep:hover{color:var(--accent-light)}
.replies{display:grid;gap:10px;margin:-4px 0 0 42px;padding-left:10px;border-left:2px solid var(--border)}
.cm.reply .cm-b{background:var(--dark-2)}
.au{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--dark);font-size:10px;font-weight:800;vertical-align:1px}
.cm-to-l{display:block;font-size:11px;color:var(--accent-light);margin-top:2px}
.cm-to{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;margin-bottom:8px;border-radius:10px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);font-size:13px}
.cm-to .link{font-size:12px}
.cbar{display:flex;gap:8px;align-items:center}
.cbar .txt{flex:1;min-width:0;min-height:48px;padding:0 14px}
.cmic,.cmsend{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.cmic{background:var(--dark-3);border:1px solid var(--border);color:var(--accent)}
.cmic.rec{background:var(--alert);color:#fff;border-color:transparent;animation:pulse 1.3s ease-in-out infinite}
.cmsend{background:var(--accent);color:var(--dark)}
.mtotal{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.mtotal .ring{width:84px;height:84px}
.notice{display:flex;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.25);font-size:13px;color:var(--text-2);margin-top:6px}
.notice .em{font-size:18px}
.toast{position:absolute;z-index:90;left:50%;top:14px;max-width:calc(100% - 28px);padding:12px 16px;border-radius:14px;background:rgba(26,26,26,.96);backdrop-filter:blur(16px);border:1px solid rgba(var(--accent-rgb),.4);box-shadow:0 12px 30px rgba(0,0,0,.5);font-size:14px;font-weight:600;transform:translate(-50%,-160%);transition:transform .35s cubic-bezier(.2,.8,.2,1);pointer-events:none;width:max-content}
.toast.show{transform:translate(-50%,0)}

/* Publication (plein écran) */
.compose{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:var(--fond-app);transform:translateY(102%);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.compose.open{transform:none}
.c-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 10px}
.dots{display:flex;gap:6px}
.dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);transition:background .3s}
.dots i.on{background:var(--accent)}
.c-body{flex:1;overflow-y:auto;padding:8px 20px 20px;scrollbar-width:none}
.c-body h2{font-size:26px;font-weight:800;margin:8px 0 6px}
.c-body .sub{margin-bottom:18px;font-size:14px}
.c-foot{padding:12px 20px 20px;border-top:1px solid var(--line);background:var(--dark)}
.shot{position:relative;width:100%;aspect-ratio:4/5;max-height:46vh;border-radius:20px;border:2px dashed rgba(var(--accent-rgb),.45);background:var(--dark-3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;color:var(--text-2);font-weight:600}
.shot .cam{width:86px;height:86px;border-radius:50%;background:var(--accent);color:var(--dark);display:grid;place-items:center;box-shadow:0 0 30px rgba(var(--accent-rgb),calc(.35*var(--glow)))}
.shot .cam .ico{width:40px;height:40px}
.shot.has{border-style:solid;border-color:var(--accent)}
.shot > img,.shot > div > svg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot > div > svg{position:static}
.shot .kb{position:absolute;left:10px;bottom:10px;z-index:2}
.alt{display:flex;justify-content:center;gap:18px;margin-top:14px;flex-wrap:wrap}
.mic{width:128px;height:128px;border-radius:50%;margin:20px auto 14px;display:grid;place-items:center;background:var(--accent);color:var(--dark);box-shadow:0 0 0 10px rgba(var(--accent-rgb),calc(.12*var(--glow))),0 0 40px rgba(var(--accent-rgb),calc(.35*var(--glow)));transition:background .2s}
.mic .ico{width:52px;height:52px}
.mic.rec{background:var(--alert);color:#fff;animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 10px rgba(var(--alert-rgb),.18),0 0 30px rgba(var(--alert-rgb),.4)}50%{box-shadow:0 0 0 22px rgba(var(--alert-rgb),.06),0 0 50px rgba(var(--alert-rgb),.5)}}
.rec-t{text-align:center;font:800 32px var(--font-title);color:var(--white)}
.vdone{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--ok-bg);border:1px solid rgba(var(--ok-rgb),.35);margin-top:8px}
.vdone b{display:block}
.vdone span{font-size:12px;color:var(--text-2)}
textarea.txt,input.txt,select.txt{width:100%;min-height:52px;padding:14px;border-radius:12px;background:var(--dark-3);border:1px solid rgba(255,255,255,.12);outline:none;resize:none;font-size:16px}
textarea.txt:focus,input.txt:focus,select.txt:focus{border-color:var(--accent)}
select.txt{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.recap{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.recap .rc{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--dark-3)}
.recap .rc svg,.recap .rc img{width:100%;height:100%;object-fit:cover;display:block}
.recap .rc span{position:absolute;left:8px;top:8px}
.kv{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--dark-3);border:1px solid var(--line);font-size:14px}
.kv div{display:flex;justify-content:space-between;gap:10px}
.kv div span{color:var(--muted)}
.kv div b{text-align:right}
.weight{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:14px;border-radius:14px;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.35)}
.weight b{font:800 22px var(--font-title);color:var(--accent-light)}

/* Inscription */
.onb{position:absolute;inset:0;z-index:50;overflow-y:auto;display:flex;flex-direction:column;padding:24px 22px;background:radial-gradient(520px 380px at 50% 0%,rgba(var(--accent-rgb),.16),transparent 70%),var(--dark)}
.onb-top{display:flex;justify-content:space-between;align-items:center;min-height:40px}
.onb-hero{text-align:center;margin:26px 0 22px}
.onb-hero .logo-xl{width:96px;height:96px;filter:drop-shadow(0 0 30px rgba(var(--accent-rgb),.35))}
.onb-hero h1{font-size:46px;font-weight:800;margin-top:14px;letter-spacing:-.02em}
.onb-hero p{font:600 italic 18px/1.4 var(--font-accent);color:var(--text-2);margin-top:8px}
.onb h2{font-size:28px;font-weight:800;margin:14px 0 8px}
.onb .sub{font-size:15px;margin-bottom:22px}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lang{display:flex;align-items:center;border-radius:14px;background:var(--dark-3);border:1.5px solid var(--card-border);overflow:hidden;transition:border-color .2s}
.lang:hover{border-color:var(--accent)}
.lang .lb{flex:1;min-height:58px;padding:0 12px;text-align:left;font:600 15px var(--font-title)}
.lang .ls{width:46px;align-self:stretch;display:grid;place-items:center;color:var(--accent);border-left:1px solid var(--line)}
.lang .ls .ico{width:18px;height:18px}
.phone{display:flex;align-items:center;gap:10px;padding:0 14px;min-height:62px;border-radius:14px;background:var(--dark-3);border:1.5px solid rgba(var(--accent-rgb),.3)}
.phone span{font-weight:700;color:var(--accent-light);white-space:nowrap}
.phone input{flex:1;min-width:0;height:60px;background:none;border:0;outline:none;font:600 22px var(--font-title);letter-spacing:.06em}
.code{width:100%;height:72px;text-align:center;font:800 34px var(--font-title);letter-spacing:.5em;border-radius:14px;background:var(--dark-3);border:1.5px solid rgba(var(--accent-rgb),.3);outline:none;padding-left:.5em}
.hint{font-size:13px;color:var(--muted);margin-top:10px}
.fgrid{display:grid;gap:12px}
.flabel{font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.charte{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.charte div{padding:16px 12px;border-radius:14px;background:var(--dark-3);border:1px solid var(--card-border);text-align:center;font-size:13px;font-weight:600;color:var(--text-2)}
.charte .em{display:block;font-size:34px;margin-bottom:8px}
.spacer{flex:1;min-height:20px}

.dotq.gold{background:var(--accent);color:var(--dark)}
button.pill{cursor:pointer}

/* Inscription en 2 gestes : clavier de téléphone + code lu automatiquement */
.onb-hero.sm{margin:4px 0 12px}
.onb-hero.sm .logo-xl{width:58px;height:58px}
.onb-hero.sm h1{font-size:30px;margin-top:8px}
.pdisp{display:flex;align-items:center;justify-content:center;gap:12px;min-height:68px;border-radius:16px;background:var(--dark-3);border:1.5px solid rgba(var(--accent-rgb),.35);font:700 27px var(--font-title);letter-spacing:.06em;margin:4px 0 14px}
.pdisp span{color:var(--accent-light);font-size:17px;letter-spacing:0}
.pdisp.bad{border-color:var(--alert)}
.pmsg{font-size:12.5px;color:var(--muted);text-align:center;margin:-4px 0 12px}
.pmsg.err{color:var(--alert-light);font-weight:600}
.pdisp .ph{color:#555;font-size:27px;letter-spacing:.06em}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.key{height:60px;border-radius:16px;background:var(--dark-3);border:1px solid var(--line);font:700 26px var(--font-title);display:grid;place-items:center;transition:background .15s,transform .1s}
.key:active{background:var(--dark-4);transform:scale(.96)}
.key.ok{background:var(--accent);color:var(--dark);border-color:transparent}
.key.ok[disabled]{opacity:.25}
.key .ico{width:30px;height:30px;stroke-width:3}
.terms{font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.7}
.terms .link{font-size:12px}
.otp{display:flex;justify-content:center;gap:12px;margin:20px 0}
.otp i{width:58px;height:70px;border-radius:14px;background:var(--dark-3);border:1.5px solid rgba(var(--accent-rgb),.3);display:grid;place-items:center;font:800 30px var(--font-title);font-style:normal;color:var(--white)}
.otp i.on{border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 16px rgba(var(--accent-rgb),calc(.25*var(--glow)))}
.where{padding:22px 18px;border-radius:20px;background:linear-gradient(160deg,var(--tint-2),var(--dark-2) 60%);border:1px solid var(--hl-border);text-align:center;animation:grow .45s cubic-bezier(.2,1.3,.4,1)}
.where .big{font-size:42px;line-height:1}
.where b{display:block;font:800 26px/1.2 var(--font-title);margin-top:6px}

/* Publication en un seul écran */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border-radius:16px;background:var(--dark-3);border:1px solid var(--line);margin-bottom:16px}
.modes button{height:52px;border-radius:12px;font:700 16px var(--font-title);color:var(--text-2);display:flex;align-items:center;justify-content:center;gap:8px}
.modes button.on{background:var(--accent);color:var(--dark)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair .shot{aspect-ratio:3/4;max-height:none;border-radius:16px;font-size:13px;text-align:center;padding:8px}
.pair .shot .cam{width:62px;height:62px}
.pair .shot .cam .ico{width:28px;height:28px}
.shot .tagb{position:absolute;left:8px;top:8px;z-index:2}
.vshot{aspect-ratio:4/5;max-height:52vh;text-align:center}
.vshot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vshot .cam{font-size:38px}
.micwrap{display:flex;align-items:center;gap:16px;margin-top:14px;padding:14px;border-radius:18px;background:var(--dark-3);border:1px solid var(--line)}
.micwrap .mic{width:84px;height:84px;margin:0;flex-shrink:0}
.micwrap .mic .ico{width:36px;height:36px}
.micwrap b{display:block;font:700 17px var(--font-title)}
.micwrap span{font-size:13px;color:var(--muted)}
.mic{touch-action:none;user-select:none;-webkit-user-select:none}
.vdone{margin-top:14px}
.addtxt{margin-top:16px}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chiprow::-webkit-scrollbar{display:none}
.chiprow button{flex-shrink:0;height:40px;padding:0 14px;border-radius:999px;background:var(--dark-3);border:1px solid var(--border);font-size:13px;font-weight:600;white-space:nowrap}
.chiprow button.on{background:var(--sel-bg);border-color:var(--accent);color:var(--accent-light)}
.checks{display:flex;justify-content:center;gap:16px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--muted)}
.checks .ok{color:var(--ok)}

/* Vidéo et texte long dans le fil */
.bigplay{position:absolute;z-index:3;left:50%;top:40%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;color:#fff;transition:opacity .2s}
.bigplay .ico{width:32px;height:32px;margin-left:5px}
.card.playing .bigplay{opacity:0}
.layer video{width:100%;height:100%;object-fit:cover;display:block}
.vprog{position:absolute;z-index:3;left:0;bottom:0;height:3px;width:0;background:var(--accent)}
.card.playing .vprog{animation:vprog var(--dur) linear forwards}
@keyframes vprog{to{width:100%}}
.desc{font-size:13.5px;line-height:1.45;color:var(--text-2);margin:-2px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.desc.open{display:block;max-height:180px;overflow-y:auto}
.chip.defi{max-width:100%;color:var(--accent-light);border-color:rgba(var(--accent-rgb),.45)}
.ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Défis du mois */
.month{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-radius:18px;background:linear-gradient(135deg,var(--tint) 0%,var(--dark-3) 60%);border:1px solid var(--hl-border);margin-bottom:14px}
.month b{font:800 20px var(--font-title)}
.month span{font-size:12px;color:var(--text-2)}
.month .em{font-size:36px}
.defi{padding:14px;border-radius:18px;background:var(--dark-3);border:1px solid var(--card-border);margin-bottom:10px}
.defi.done{opacity:.72}
.d-top{display:flex;gap:12px}
.defi h4{margin:0 0 6px;font:700 16px/1.3 var(--font-title)}
.orig{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;margin:0 4px 4px 0}
.orig.hab{background:var(--alert-bg);color:var(--alert-light)}
.orig.adm{background:rgba(var(--accent-rgb),.14);color:var(--accent-light)}
.orig.car{background:rgba(255,255,255,.06);color:var(--text-2)}
.d-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--muted);margin-top:4px}
.d-meta .ico{width:13px;height:13px;vertical-align:-2px}
.reward{margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(var(--accent-rgb),.07);font-size:13px;color:var(--text-2)}
.defi .btn{margin-top:12px;min-height:52px}
.solved{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--ok-light);font-weight:600}
.solved .ico{width:18px;height:18px}
.flow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px dashed rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.05);font-size:13px;color:var(--text-2);margin-bottom:12px}
.flow .em{font-size:26px}
.rep{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--dark-3);border:1px solid var(--line);margin-bottom:8px}
.rep .nic{width:44px;height:44px;font-size:22px}
.rep b{display:block;font:600 14px/1.3 var(--font-title)}
.rep span{font-size:12px;color:var(--muted)}
.admin{margin-top:24px;padding:16px;border-radius:18px;border:1px dashed rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.05)}
.admin .btn{margin-top:10px}
input.txt.sm{width:150px;min-height:42px;padding:8px 12px;font-size:14px}

/* =========================================================
   7. ANIMATIONS (révélation, passage de niveau, confettis)
   ========================================================= */
.rv{opacity:0;transform:translateY(30px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.rv.visible{opacity:1;transform:none}
.lvlup{position:absolute;inset:0;z-index:85;display:grid;place-items:center;padding:24px;background:rgba(5,5,5,.86);backdrop-filter:blur(20px);opacity:0;transition:opacity .35s;overflow:hidden}
.lvlup.show{opacity:1}
.rays{position:absolute;width:760px;height:760px;left:50%;top:42%;margin:-380px 0 0 -380px;background:repeating-conic-gradient(rgba(var(--accent-rgb),.13) 0 9deg,transparent 9deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 18%,transparent 62%);mask:radial-gradient(circle,#000 18%,transparent 62%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lv-box{position:relative;width:100%;max-width:330px;text-align:center}
.lv-ico{width:130px;height:130px;margin:16px auto 10px;animation:grow .9s cubic-bezier(.2,1.4,.4,1)}
.lv-ico svg{width:100%;height:100%;filter:drop-shadow(0 0 26px rgba(var(--accent-rgb),.55))}
@keyframes grow{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
.lv-box h2{font-size:28px;font-weight:800;margin-bottom:16px}
.lv-box h2 em{font-style:normal;color:var(--accent-light)}
.lv-box ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;text-align:left}
.lv-box li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:14px}
.lv-box li .ico{width:18px;height:18px;color:var(--ok)}
.conf{position:absolute;top:-20px;width:8px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(900px) rotate(720deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* =========================================================
   8. AJOUTS DU MVP (données réelles, compte, caméra, file d'envoi)
   ========================================================= */
.layer img{background:#1A1A1A}
.layer .vide{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:13px}
.media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chargement{display:grid;place-items:center;height:100%;color:var(--muted);gap:14px;text-align:center;padding:30px}
.chargement .rond{width:42px;height:42px;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.2);border-top-color:var(--accent);animation:spin 1s linear infinite}
.fin-fil{height:100%;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 28px;text-align:center;background:radial-gradient(420px 320px at 50% 40%,rgba(var(--accent-rgb),.1),transparent 70%)}
.fin-fil .big{font-size:48px}
.fin-fil p{color:var(--text-2)}
/* Code SMS à 6 chiffres */
.otp.six i{width:44px;height:58px;font-size:26px}
.otp-saisie{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.otp-zone{position:relative;cursor:text}
.pmsg.ok{color:var(--ok-light)}
/* Choix du quartier */
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;max-height:38vh;overflow-y:auto}
.qgrid button{min-height:52px;padding:8px 10px;border-radius:12px;background:var(--dark-3);border:1.5px solid var(--card-border);font:600 14px/1.25 var(--font-title);text-align:center}
.qgrid button:hover,.qgrid button.sel{border-color:var(--accent);background:var(--sel-bg)}
.where .sub{display:block}
.mini.danger{border-color:rgba(var(--alert-rgb),.5);color:var(--alert-light)}
/* Caméra vidéo dans l'app */
.camvid{position:absolute;inset:0;z-index:60;background:#000;display:flex;flex-direction:column}
.camvid video{flex:1;min-height:0;width:100%;object-fit:cover;background:#000}
.camvid .cv-haut{position:absolute;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.camvid .cv-temps{font:800 20px var(--font-title);padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.5)}
.camvid .cv-temps.rec{background:var(--alert)}
.camvid .cv-bas{display:flex;justify-content:center;align-items:center;gap:26px;padding:18px 16px 28px;background:#000}
.camvid .cv-bouton{width:78px;height:78px;border-radius:50%;border:5px solid #fff;background:var(--alert);transition:border-radius .2s,transform .15s}
.camvid .cv-bouton.rec{border-radius:20px;transform:scale(.8)}
.camvid .cv-jauge{position:absolute;left:0;top:0;height:4px;background:var(--accent);width:0;z-index:3}
/* Envoi en cours et file d'attente */
.envois{display:grid;gap:8px;margin-top:10px}
.envoi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--dark-3);border:1px solid var(--line);font-size:13px}
.envoi b{display:block;font-size:14px}
.envoi span{color:var(--muted)}
.envoi .err{color:var(--alert-light)}
.envoi > div{flex:1;min-width:0}
.barre-envoi{height:4px;border-radius:2px;background:var(--dark-4);overflow:hidden;margin-top:6px}
.barre-envoi i{display:block;height:100%;width:0;background:var(--accent);transition:width .3s}
.cm-sup{margin:4px 0 0 10px;font-size:12px;font-weight:700;color:var(--muted)}
.cm-sup:hover{color:var(--alert-light)}
.prenom-pub{margin-top:16px}
.loc-entete{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);margin-bottom:6px}
.carte-erreur{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;height:100%;padding:32px;text-align:center}
.carte-erreur .big{font-size:44px}
.st.supprimee{background:var(--alert-bg);color:var(--alert-light)}
.lien-partage{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600;color:var(--accent-light);background:rgba(0,0,0,.45)}
/* Commentaires : la liste défile, la barre pour écrire reste visible en bas */
.sheet[data-k="commentaires"].open{display:flex;flex-direction:column;overflow:hidden}
.sheet[data-k="commentaires"] .cms{flex:1 1 auto;min-height:90px;max-height:none}
.sheet[data-k="commentaires"] .grab,.sheet[data-k="commentaires"] .sh-head,.sheet[data-k="commentaires"] .cbar,.sheet[data-k="commentaires"] .cm-to{flex-shrink:0}
.feed{overflow-anchor:none}
.thumb img{object-position:bottom}