:root{
  --bg:#0b1118;
  --panel:#121a24;
  --panel2:#0e151f;
  --text:#eef3f7;
  --muted:#9aa6b6;
  --accent:#ff8a24;
  --accent2:#21c4b7;
  --danger:#ff3f64;
  --ok:#2ad59a;
  --line:rgba(255,255,255,.10);
  --shadow:rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{
  margin:0;
  font:15px/1.45 "Avenir Next","Futura","Gill Sans","Trebuchet MS",sans-serif;
  color:var(--text);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px),
    radial-gradient(1200px 700px at 20% -10%, rgba(255,138,36,.25), transparent 60%),
    radial-gradient(900px 600px at 90% 10%, rgba(33,196,183,.20), transparent 55%),
    linear-gradient(180deg, #05070d 0%, var(--bg) 100%);
  min-height:100vh;
}
a{color:inherit}
img{max-width:100%; display:block}

/* Focus visible (accessibilité clavier) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline:3px solid rgba(33,196,183,.55);
  outline-offset:3px;
  border-radius:12px;
}

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  padding:10px 12px;
  background:linear-gradient(90deg, rgba(255,63,100,.28), rgba(255,138,36,.20));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.brand{
  font-weight:900;
  letter-spacing:.3px;
  white-space:nowrap;
}
.pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.25);
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--danger);
  box-shadow:0 0 0 0 rgba(255,63,100,.55);
  animation:pulseDot 1.1s infinite;
}
@keyframes pulseDot{
  0%{box-shadow:0 0 0 0 rgba(255,63,100,.55)}
  70%{box-shadow:0 0 0 12px rgba(255,63,100,0)}
  100%{box-shadow:0 0 0 0 rgba(255,63,100,0)}
}

.countdown{
  flex:1 1 220px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.countdown small{color:var(--muted); white-space:nowrap;}
.bar{
  height:10px;
  flex:1;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
}
.bar > span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg, var(--danger), var(--accent));
  animation:drain 6s linear infinite;
  transform-origin:left;
}
@keyframes drain{
  0%{transform:scaleX(1)}
  100%{transform:scaleX(.05)}
}

/* Layout */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:14px 12px 90px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
@media (max-width: 900px){
  .wrap{grid-template-columns: 1fr}
  .sidebar{position:static}
}
@media (max-width: 700px){
  .feedHeader{flex-direction:column; align-items:flex-start}
  .streak{text-align:left; width:100%}
  .top-actions{width:100%}
}

.panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:14px;
}

/* Actions topbar */
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.ghost{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(0,0,0,.20);
  color:var(--text);
  font-size:12px;
  text-decoration:none;
  letter-spacing:.2px;
}
.ghost:hover{border-color:rgba(255,255,255,.45)}

/* Header (signup) */
.header h1{
  margin:0 0 6px;
  font-size:18px;
}
.sub{
  margin:0 0 12px;
  color:var(--muted);
}
.highlight{
  color:var(--text);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-decoration-color: rgba(255,63,100,.55);
}
.micro{opacity:.85}

.callout{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  margin-bottom:12px;
}
.live{
  width:10px;height:10px;border-radius:50%;
  background:var(--danger);
  animation:blink .8s infinite steps(2, end);
  margin-top:4px;
}
@keyframes blink{ 50%{opacity:.15} }

.muted{color:var(--muted)}

/* Feed container (ajout) */
.feed{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding:12px;
  box-shadow:0 12px 28px var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.feedHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  padding:6px 2px 4px;
}
.feedHeader h1{
  margin:0 0 4px;
  font-size:22px;
  letter-spacing:.2px;
}
.hint{
  font-size:12px;
  color:var(--muted);
  opacity:.95;
}

.marquee{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color:var(--muted);
}
.marquee span{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
}

/* Streak */
.streak{
  min-width:220px;
  text-align:right;
  color:var(--muted);
  font-size:12px;
}
.streak-bar{
  margin:6px 0 4px;
  height:8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.streak-bar span{
  display:block;
  height:100%;
  width:76%;
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  animation:meterWobble 2.8s ease-in-out infinite;
  transform-origin:left;
}
@keyframes meterWobble{
  0%,100%{transform:scaleX(.92)}
  50%{transform:scaleX(1)}
}

/* Cards in feed */
.post,
.interruption,
.nudge{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding:12px;
  box-shadow:0 12px 28px var(--shadow);
}
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.meta strong{display:block; font-weight:800}
.meta span{
  display:block;
  color:var(--muted);
  font-size:12px;
}
.avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(130deg, rgba(255,255,255,.2), rgba(255,255,255,0)),
    radial-gradient(circle at 30% 30%, var(--accent), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--accent2), transparent 60%);
}
.thumb{
  margin:10px 0;
  height:160px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120px 80px at 20% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  position:relative;
  overflow:hidden;
}
.thumb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08), transparent 60%);
  animation:glide 4s linear infinite;
}
@keyframes glide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}
.badge{
  position:absolute;
  bottom:10px;
  left:10px;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  gap:8px;
}

.actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  color:var(--text);
  white-space:nowrap;
  cursor:pointer;
  font-weight:600;
}
button.chip{
  appearance:none;
  font:inherit;
}
.ghost-chip{
  opacity:.6;
  border-style:dashed;
}

.skeleton{
  border:1px dashed rgba(255,255,255,.16);
  border-radius:16px;
  padding:12px;
  background:rgba(0,0,0,.18);
}
.skline{
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  margin:8px 0;
}

.interruption p,
.nudge p{
  margin:10px 0;
  color:var(--muted);
  font-size:13px;
}
.quiz{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.progress{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin-bottom:10px;
}
.progress span{
  display:block;
  height:100%;
  width:88%;
  background:linear-gradient(90deg, var(--danger), var(--accent));
  animation:drain 5s linear infinite;
  transform-origin:left;
}

.loader{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25);
  color:var(--muted);
  font-size:12px;
}
.spinner{
  width:28px;
  height:28px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:var(--accent2);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Form */
.form{margin-top:4px}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
@media (max-width: 700px){
  .grid{grid-template-columns:1fr}
}
.field span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.20);
  color:var(--text);
  outline:none;
}
.field input:focus{
  border-color: rgba(255,138,36,.55);
  box-shadow:0 0 0 4px rgba(255,138,36,.18);
}
.hint{
  font-size:12px;
  color:var(--muted);
}

/* CTA */
.cta{
  margin-top:12px;
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(90deg, var(--accent), var(--danger));
  color:white;
  font-weight:900;
  letter-spacing:.2px;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(255,138,36,.20);
  animation:ctaPulse 1.25s infinite;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.cta small{font-weight:700; opacity:.9}
@keyframes ctaPulse{
  0%{transform:translateY(0); box-shadow:0 18px 40px rgba(255,138,36,.20)}
  50%{transform:translateY(-1px); box-shadow:0 26px 70px rgba(255,63,100,.24)}
  100%{transform:translateY(0); box-shadow:0 18px 40px rgba(255,138,36,.20)}
}

/* Confirmshaming */
.decline{
  margin-top:8px;
  text-align:center;
}
.decline a{
  font-size:12px;
  color:rgba(233,238,252,.62);
  text-decoration:none;
}
.decline a:hover{color:rgba(233,238,252,.78); text-decoration:underline;}

.sep{
  border:none;
  border-top:1px solid rgba(255,255,255,.10);
  margin:14px 0;
}

/* Opt-ins */
.consent{display:flex; flex-direction:column; gap:10px}
.toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--muted);
  font-size:12px;
}
.toggle input{
  width:18px;height:18px;
  accent-color: var(--accent);
  flex:0 0 auto;
}

.advanced{
  text-align:right;
}
.advanced a{
  font-size:12px;
  color:rgba(233,238,252,.55);
  text-decoration:none;
}
.advanced a:hover{color:rgba(233,238,252,.75); text-decoration:underline;}

.legal{
  margin:12px 0 0;
  color:rgba(233,238,252,.70);
  font-size:12px;
}
.legal a{color:rgba(233,238,252,.85); text-decoration:underline; text-decoration-thickness:2px;}

/* Sidebar */
.sidebar{
  position:sticky;
  top:62px;
  align-self:start;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.card{
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding:12px;
}
.card h2{margin:0 0 6px; font-size:14px}
.card p{margin:0 0 10px; color:var(--muted); font-size:12px}
.note p{margin:0}

.meter{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  overflow:hidden;
  margin:8px 0 10px;
}
.meter span{
  display:block;
  height:100%;
  width:72%;
  background:linear-gradient(90deg, var(--ok), var(--accent));
  animation:meterWobble 2.4s ease-in-out infinite;
  transform-origin:left;
}

.bullets{
  margin:0;
  padding-left:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:rgba(233,238,252,.78);
  font-size:12px;
}
.spark{
  display:inline-block;
  width:10px;height:10px;border-radius:3px;
  background:var(--ok);
  margin-right:8px;
  animation:spark 1.2s infinite;
}
@keyframes spark{ 50%{opacity:.25; transform:rotate(12deg)} }

/* Toasts */
.toast{
  position:fixed;
  right:14px;
  bottom:14px;
  width:min(360px, calc(100vw - 28px));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  background:rgba(10,14,26,.82);
  backdrop-filter: blur(10px);
  padding:10px 12px;
  box-shadow:0 26px 70px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(14px);
  animation:toastCycle 9s infinite;
}
.toast.t2{animation-delay:4.5s}
.toast strong{display:block; font-size:12px}
.toast span{color:var(--muted); font-size:12px}
@keyframes toastCycle{
  0%, 10%{opacity:0; transform:translateY(14px)}
  18%, 55%{opacity:1; transform:translateY(0)}
  65%, 100%{opacity:0; transform:translateY(14px)}
}

/* Conteneur des posts générés */
.feedList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Sentinel du scroll infini : on le rend “toujours présent” */
.loader-sentinel{
  margin-top:6px;
}