:root{
  /* Dark mode PERMANENT : valeurs sombres reportées ici, plus de @media prefers-color-scheme.
     L'app reste sombre quel que soit le réglage de l'appareil. */
  --bg:#262624; --text-on-bg:#F5F4EF;
  --card:#000000; --card-text:#F5F4EF; --card-muted:#9C9A90;
  --card-border:#3E3D39; --accent:#5DB4FF;
  --media-bg:#111111;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
html,body{margin:0;max-width:100%}
body{
  background:var(--bg); color:var(--text-on-bg);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;      /* rebond vertical natif conservé : scroll fluide */
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
}

/* ---------- top bar (safe area iPhone) ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--card-border);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  max-width:975px; margin:0 auto; height:50px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
}
/* logo Pyckanews (SVG bicolore blanc + orange) sur barre sombre : aucun recoloriage */
.brand-logo{height:30px;width:auto;display:block}
.count{color:var(--text-on-bg);opacity:.55;font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- chips de filtre par source (dans la zone sticky, sous la ligne logo) ---------- */
.filters{
  max-width:975px;margin:0 auto;
  display:flex;gap:8px;align-items:center;
  padding:0 max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  border:1px solid var(--card-border);border-radius:999px;
  background:transparent;color:var(--text-on-bg);
  font-family:var(--sans);font-size:13px;font-weight:600;line-height:1;
  padding:8px 14px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
/* chip active : pastille neutre inversée */
.chip.active{background:var(--card-text);border-color:var(--card-text);color:#141413}

/* ---------- feed ---------- */
.feed{max-width:470px;margin:0 auto;padding:18px 0 0}

.post{
  background:var(--card); border:1px solid var(--card-border); border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.16); margin-bottom:20px; overflow:hidden;
  color:var(--card-text);
}
/* Post écarté par le filtre de source (classe dédiée, indépendante de [hidden]/validation vidéo) */
.post.filtered-out{display:none!important}

/* Mobile : les posts restent des cards arrondies, avec une marge latérale */
@media (max-width:520px){
  .feed{
    max-width:100%;
    padding:14px max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }
  .post{border-radius:16px;margin-bottom:16px}
}

/* ---------- en-tête de post : titre (2 lignes max) + compteur ---------- */
.post-head{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px 10px;
}
/* en-tête façon Instagram : logo rond de la source + nom (remplace le titre) */
.src{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.src-logo{flex:0 0 auto;width:30px;height:30px;border-radius:50%;overflow:hidden;background:#222}
.src-logo img{width:100%;height:100%;object-fit:cover;display:block}
.src-name{font-weight:600;font-size:14px;color:var(--card-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcount{
  flex:0 0 auto;color:var(--card-muted);
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  text-transform:uppercase;letter-spacing:.3px;
}

/* ---------- media (carrousel + vidéo) ---------- */
.media{position:relative;background:var(--media-bg);overflow:hidden;line-height:0}
.track{
  display:flex;align-items:flex-start;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y;                     /* swipe horizontal = carrousel, geste vertical = la page défile */
  overscroll-behavior-x:contain;                /* empêche le swipe "retour" iOS */
  overflow-anchor:none;                          /* pas de décalage auto quand les images chargent */
}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;max-width:100%;scroll-snap-align:start;scroll-snap-stop:always}
.slide img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none}

.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#262626;
  display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:opacity .15s;
}
.nav.prev{left:10px} .nav.next{right:10px}
.nav[disabled]{opacity:0;pointer-events:none}
.nav svg{width:17px;height:17px}
@media (hover:none){ .nav{display:none} }        /* mobile : on navigue au swipe */

.dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:5;
  display:flex;gap:5px;justify-content:center;align-items:center;pointer-events:none;
}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.4);transition:all .2s}
.dot.active{background:#fff;transform:scale(1.25)}

/* ---------- vidéo : cadre 9/16 par défaut (Reels), ajusté au ratio réel au chargement ---------- */
.media.is-video{aspect-ratio:9/16}
.vposter{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;cursor:pointer}
.media.is-video video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:2;opacity:0;pointer-events:none;cursor:pointer;
}
.post.started .media.is-video video{opacity:1;pointer-events:auto}
.vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;
  width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;
  backdrop-filter:blur(2px);transition:opacity .2s,transform .1s;
}
.vplay:active{transform:translate(-50%,-50%) scale(.94)}
.vplay svg{width:27px;height:27px;margin-left:3px}
.post.playing .vplay{opacity:0;pointer-events:none}
.vsound{
  position:absolute;right:12px;bottom:20px;z-index:8;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;
}
.vsound svg{width:18px;height:18px}

/* décompte du temps restant (bas gauche) — visible une fois la lecture lancée */
.vtime{
  position:absolute;left:14px;bottom:22px;z-index:8;
  color:#fff;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;transition:opacity .2s;
}
/* barre de lecture (scrub) tout en bas de la vidéo */
.vseek{
  position:absolute;left:0;right:0;bottom:0;z-index:8;height:16px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s;touch-action:none;
}
.vseek::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.3)}
.vseek-fill{position:absolute;left:0;bottom:0;height:3px;background:#fff;width:0;pointer-events:none}
.post.started .vtime{opacity:1}
.post.started .vseek{opacity:1;pointer-events:auto}

/* ---------- body (date + caption) ---------- */
.body{padding:12px 16px 16px}
.date{
  display:block;color:var(--card-muted);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.2px;margin-bottom:6px;
}
.caption{
  font-size:15px;line-height:1.5;color:var(--card-text);
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;margin:0;
}
.caption .mention{color:var(--accent)}

footer{max-width:470px;margin:6px auto 0;text-align:center;color:var(--text-on-bg);opacity:.5;font-size:12px;padding:16px}