*{box-sizing:border-box}html,body{margin:0;height:100%;background:#090e16;color:#f6f9fb;font:15px system-ui,-apple-system,Segoe UI,Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}#app{max-width:720px;margin:auto;min-height:100dvh;display:flex;flex-direction:column}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:#101b27;border-bottom:1px solid #243442}.brand{font-size:23px;font-weight:850;letter-spacing:-.7px}.brand span{color:#26e5a1}.mini{background:#26e5a1;color:#072217;border:0;border-radius:9px;padding:8px 12px}main{flex:1;min-height:0}.screen{display:none;padding:18px 16px 90px;min-height:calc(100dvh - 122px)}.screen.active{display:block}#feed{padding:0 0 66px}.topline{height:42px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;background:#101b27}.topline span,.muted{color:#9cb1be;font-size:13px}.videos{height:calc(100dvh - 166px);min-height:340px;overflow-y:auto;scroll-snap-type:y mandatory;background:#080c12}.video-card{height:100%;min-height:340px;position:relative;scroll-snap-align:start;background:linear-gradient(135deg,#1d3542,#0b101a);display:flex;align-items:center;justify-content:center}.video-card video{height:100%;width:100%;object-fit:contain}.video-info{position:absolute;bottom:20px;left:15px;right:90px;text-shadow:0 1px 5px #000;font-weight:650}.video-actions{position:absolute;right:10px;bottom:30px;display:grid;gap:14px}.video-actions button{border:0;border-radius:40px;background:#0009;color:white;padding:10px}.empty{padding:40px 20px;text-align:center;color:#b2c2ca}.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,720px);height:66px;display:flex;background:#101b27;border-top:1px solid #293a46;z-index:10;padding-bottom:env(safe-area-inset-bottom)}.bottom button{flex:1;border:0;background:transparent;color:#9cb1be;font-size:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom button span{font-size:25px}.bottom button.active{color:#26e5a1}h2{font-size:25px;margin:8px 0 12px}h3{margin:0 0 9px}.cards{display:grid;gap:12px;margin:18px 0}.card,.feature{background:#152330;border:1px solid #2a4050;border-radius:14px;padding:17px;margin:14px 0}.price{color:#26e5a1;font-weight:750}.primary{background:#20d79b;color:#05251b;border:0;border-radius:12px;padding:13px 17px;font-weight:800;margin-top:14px;width:100%}label{display:block;margin:16px 0 5px;color:#c7d5dd}input{display:block;width:100%;margin-top:7px;border:1px solid #435668;border-radius:10px;padding:13px;background:#0c1520;color:#fff}.switch{display:flex;gap:10px;margin:20px 0}.switch button{flex:1;border:1px solid #395365;border-radius:9px;padding:10px;background:#152330;color:#fff}.switch button.selected{background:#20d79b;color:#08231b}#toast{position:fixed;z-index:20;left:50%;bottom:80px;transform:translateX(-50%);background:#f3f7f9;color:#16222b;border-radius:10px;padding:12px 18px;max-width:90%;display:none;box-shadow:0 4px 20px #0008}#toast.show{display:block}
/* Pack 2 inscription */
.auth-screen{background:#f3f7fc;color:#111b35;padding:0 0 100px}.auth-hero{display:flex;align-items:center;gap:12px;background:linear-gradient(110deg,#062d4b,#006e69);padding:24px 16px;color:white}.auth-logo{display:grid;place-items:center;border-radius:14px;width:52px;height:52px;background:linear-gradient(135deg,#32d6f0,#8e44ff,#ffac25);font-size:28px}.auth-brand{font-size:24px;font-weight:900}.auth-brand span{color:#ffdc20}.auth-sub{font-size:12px}.auth-progress{margin-left:auto;font-size:12px;white-space:nowrap}.auth-intro{padding:22px 20px 10px;background:linear-gradient(135deg,#0a3959,#047453);color:white}.auth-intro h2{font-size:28px;margin:0 0 8px}.auth-intro p{margin:0 0 10px}.auth-panel{margin:14px;background:#fff;border-radius:20px;padding:18px;box-shadow:0 8px 30px #172c4422}.auth-panel label{color:#152342;font-weight:650;font-size:14px}.auth-panel input,.auth-panel select{background:#fff;color:#14213b;border:1px solid #d0dbea;width:100%;padding:13px;border-radius:10px;margin-top:7px;font-size:15px}.auth-panel .switch button{background:#f3f7fc;color:#1a3044;border-color:#d6e1ec}.auth-panel .switch button.selected{background:#087b52;color:white}.auth-panel .primary{background:linear-gradient(90deg,#00894a,#05a348);color:white}.auth-muted{color:#64748b}.phone-row{display:flex;align-items:center;border:1px solid #d0dbea;border-radius:10px;margin-top:7px}.phone-row span{padding:0 12px;white-space:nowrap}.phone-row input{border:0;margin:0}.terms{display:flex!important;align-items:start;gap:10px;background:#e9f9ee;padding:12px;border-radius:10px}.terms input{width:20px;flex:0 0 20px;margin:0}.step-actions{display:flex;gap:10px;align-items:center}.step-actions button:first-child{border:1px solid #d0dbea;background:white;border-radius:10px;padding:13px;margin-top:14px}.step-actions .primary{flex:1}.auth-panel [hidden],#auth [hidden]{display:none!important}

#profile-edit {margin:12px 0;padding:16px;border-radius:14px;background:#152532}
#profile-edit textarea {width:100%;box-sizing:border-box;border-radius:8px;padding:12px;background:#f6f9fc;color:#142535}
.profile-avatar {width:92px;height:92px;object-fit:cover;border-radius:50%;border:3px solid #17b879}
.video-actions {display:flex;gap:8px;flex-wrap:wrap}
.video-actions button {min-width:40px}

.camera-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.camera-option{padding:16px 10px;border-radius:12px;border:1px solid #25b889;background:#173448;color:#fff;font-size:15px;font-weight:700;cursor:pointer}.camera-option:focus-visible{outline:3px solid #f4c44d}#video-preview{display:block;width:100%;max-height:420px;object-fit:contain;border-radius:12px;background:#05090d;margin:12px 0}#video-preview[hidden]{display:none}.video-file-label{display:none}@media(max-width:350px){.camera-choices{grid-template-columns:1fr}}

#upload-status{margin:12px 0;line-height:1.5;overflow-wrap:anywhere}#publish-video-button:disabled{opacity:.5;cursor:wait}#upload-progress{height:15px;accent-color:#16a36c}


/* MonetiZone : actions video en colonne a droite - priorite haute */
#feed #videos .video-card { position: relative !important; }
#feed #videos .video-card .video-actions {
  position: absolute !important;
  top: auto !important;
  right: 10px !important;
  bottom: 68px !important;
  left: auto !important;
  width: 56px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  z-index: 5 !important;
}
#feed #videos .video-card .video-actions > button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 4px !important;
  flex: 0 0 48px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,.65) !important;
  color: white !important;
  font-size: 15px !important;
}
#feed #videos .video-card .video-info { right: 78px !important; }
@media (max-height: 570px) {
  #feed #videos .video-card .video-actions { gap: 4px !important; bottom: 15px !important; }
  #feed #videos .video-card .video-actions > button { width: 38px !important; min-width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
}