/* =========================================================
   DarkInsta — Shell global (Rouge / Bleu / Noir unifié)
   Aligne la palette et les halos sur styles.css (landing)
   ========================================================= */

/* ---------- Variables (alignées sur styles.css) ---------- */
:root{
  /* Base */
  --bg:#0b0c0f;
  --text:#e7eaf1;
  --muted:#8b94a7;
  --border:#222739;
  --line:#222739;
  --panel:#12141a;
  --card:#141722;

  /* Accents (mêmes teintes que styles.css) */
  --accent-red:#ff3355;
  --accent-red-2:#a41228;
  --accent-blue:#2da2cc;
  --accent-blue-2:#197aa1;

  /* Boutons / rings */
  --btn:#e9edf9;
  --btn-ink:#0a0f1a;

  /* Layout */
  --sidebar:260px;
  --sidebar-collapsed:220px;
  --flyout-gap:0px;
  --rail-collapsed:92px;
}

/* ---------- Typo ---------- */
html, body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
b, strong{font-weight:800}
button, input, select, textarea, a, code, kbd, samp, small, b, strong{font-family:inherit}

/* ---------- Fond global : halos Rouge/Bleu (comme styles.css) ---------- */
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(255,51,85,.20), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%,  rgba(45,162,204,.12), transparent 55%),
    var(--bg);
}
body.modal-open{overflow:hidden}

/* =========================================================
   LAYOUT (sidebar + contenu)
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height:100vh;
}
body.side-collapsed .layout{grid-template-columns: var(--sidebar-collapsed) 1fr;}
.main{min-width:0; grid-column:2 / -1;}
.content{padding:22px}
body.side-collapsed .main{grid-column:2 / -1;}

/* ---------- Sidebar : verre fumé + légers halos R/B ---------- */
.side{
  position:fixed; inset:0 auto 0 0; width:var(--sidebar);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:14px 10px; overflow-y:auto; -webkit-overflow-scrolling:touch;

  background:
    linear-gradient(180deg, rgba(18,20,26,.85), rgba(11,12,15,.85)),
    radial-gradient(900px 60% at -30% -20%, rgba(255,51,85,.12), transparent 60%),
    radial-gradient(800px 60% at 120% -10%, rgba(45,162,204,.10), transparent 60%);
  backdrop-filter:saturate(1.08) blur(6px);
  border-right:1px solid rgba(255,255,255,.06);
}
body.side-collapsed .side{width:var(--sidebar-collapsed)}

/* Header brand */
.side-head{padding:6px 6px 10px}
.side-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.side-brand .logo{font-weight:900;font-size:20px;letter-spacing:.2px}

/* Nav */
.side-nav{display:grid;gap:4px;padding:4px}
.nav-btn,.nav-link-like{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:transparent; border:0; color:#e6e9f7;
  text-decoration:none; cursor:pointer; text-align:left; font-size:14px;
}
.nav-btn .txt,.nav-link-like .txt{font-weight:700}
.nav-btn:hover,.nav-link-like:hover{background:rgba(18,22,36,.7)}
.nav-btn.is-active{
  background:rgba(16,21,36,.88);
  outline:1px solid #1c2236;
}
.nav-ic{width:28px;height:28px;display:inline-grid;place-items:center}
.nav-ic svg{width:22px;height:22px;display:block}

/* Badge notifs */
.nav-link-like{position:relative}
.notif-dot{
  position:absolute;left:20px;top:6px;width:8px;height:8px;
  background:var(--accent-red);border-radius:50%;
  box-shadow:0 0 0 2px rgba(11,12,15,.75);
}

/* User chip */
.side-user{padding:6px}
.user-chip{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:12px;cursor:pointer;
  border:1px solid transparent;background:transparent;
}
.user-chip:hover{background:rgba(18,22,36,.7);border-color:#1a2033}
.user-chip .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.u-meta .name{font-weight:700}
.u-meta .sub{color:var(--muted);font-size:12px}
.user-chip{position:relative}
.u-menu{
  position:absolute; right:0; bottom: calc(100% + 6px);
  min-width:200px; padding:8px;
  background:rgba(15,18,24,.94);
  border:1px solid #21263a; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:none; z-index:10; backdrop-filter: blur(6px) saturate(1.05);
}
.user-chip.open .u-menu{display:block}
.u-menu a{display:block;color:#e6e9f7;text-decoration:none;padding:8px;border-radius:8px}
.u-menu a:hover{background:#151a25}
.u-menu hr{border:0;border-top:1px solid #1f2436;margin:6px 0}
.u-menu a.danger{color:#ff9aa8}

/* =========================================================
   BOTTOM BAR (mobile)
   ========================================================= */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:110;
  display:none; justify-content:space-around;
  padding:6px 10px;
  background:rgba(13,15,20,.92);
  border-top:1px solid var(--line);
  backdrop-filter:saturate(1.1) blur(6px);
}
.mb-ico{display:inline-grid;place-items:center;width:20%;text-decoration:none;color:#e6e9f7}
.mb-ico-svg{width:26px;height:26px;display:block}
.mb-ico-svg--filled{display:none}
.mb-ico.active .mb-ico-svg--filled{display:block}
.mb-ico.active .mb-ico-svg--outline{display:none}
.mb-ico--plus{transform:translateY(-6px)}
.mb-ico--avatar img{width:28px;height:28px;border-radius:50%;object-fit:cover}

/* =========================================================
   FLYOUTS — Notifications & Recherche (desktop)
   (collés au rail, même halo Rouge/Bleu)
   ========================================================= */
.notif-flyout, .search-flyout{
  position:fixed; top:16px; bottom:16px;
  left: calc(var(--sidebar) + var(--flyout-gap)) !important; right:auto !important;
  width:380px; display:none; z-index:131;
  background:
    linear-gradient(180deg, rgba(17,19,26,.92), rgba(11,12,15,.92)),
    radial-gradient(900px 60% at -30% -20%, rgba(255,51,85,.18), transparent 60%),
    radial-gradient(900px 60% at 120% -10%, rgba(45,162,204,.14), transparent 60%);
  border:1px solid var(--line); border-left:0;
  border-top-left-radius:0; border-bottom-left-radius:0;
  border-top-right-radius:12px; border-bottom-right-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  backdrop-filter:saturate(1.1) blur(6px);
}
.notif-flyout[aria-hidden="false"], .search-flyout[aria-hidden="false"]{display:block}
body.side-collapsed .notif-flyout, body.side-collapsed .search-flyout{
  left: calc(var(--sidebar-collapsed) + var(--flyout-gap)) !important;
}

.nf-head,.sr-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;border-bottom:1px solid var(--line); background:transparent;
}
.nf-head h3,.sr-head h3{margin:0;font-size:16px;font-weight:800;color:var(--text)}
#nfClose,#srClose{border:0;background:transparent;color:#e6e9f7;font-size:18px;cursor:pointer;opacity:.9}
#nfClose:hover,#srClose:hover{opacity:1}
#nfList{padding:10px;display:grid;gap:8px;max-height:calc(100% - 50px);overflow:auto}
.nf-item{padding:10px;border:1px solid var(--line);background:var(--card);border-radius:12px}
.nf-empty,.sr-empty{opacity:.7;padding:10px;text-align:center}

.sr-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.sr-bar svg{width:18px;height:18px;opacity:.8}
#srInput{
  flex:1; height:36px; border-radius:10px;
  border:1px solid #242a3f; background:#10131a; color:#fff; padding:0 10px;
}
.sr-results{padding:10px; max-height:calc(100% - 98px); overflow:auto; display:grid; gap:8px}
.sr-item{
  display:flex; align-items:center; gap:10px;
  padding:8px; border:1px solid var(--line); border-radius:12px; background:#10131a;
  text-decoration:none; color:inherit;
}
.sr-item .av{width:38px;height:38px;border-radius:50%;object-fit:cover}
.sr-item .name{font-weight:800}
.sr-item .usr{color:#9aa0a6;font-size:12px}
.sr-item .go{
  margin-left:auto; border:1px solid #2a2f43; background:#151a2a; color:#e6e9f7;
  border-radius:10px; padding:6px 10px; font-weight:800; cursor:pointer;
}

/* Rail compact quand flyout/cherche est ouvert */
body.search-open .nav-btn .txt,
body.search-open .nav-link-like .txt,
body.notif-open .nav-btn .txt,
body.notif-open .nav-link-like .txt{ display:none !important; }
body.search-open .nav-ic, body.notif-open .nav-ic{ width:32px; height:32px; }
body.search-open .nav-ic svg, body.notif-open .nav-ic svg{ width:20px; height:20px; }
body.search-open .layout, body.notif-open .layout{ grid-template-columns: 92px 1fr; }
body.search-open .side,   body.notif-open .side{ width:92px; }
body.search-open .search-flyout{ left: calc(92px + var(--flyout-gap)) !important; }
body.notif-open  .notif-flyout{ left: calc(92px + var(--flyout-gap)) !important; }

/* =========================================================
   MODALES Mobile — Notifications & Recherche
   ========================================================= */
.nf-modal,.sr-modal{position:fixed; inset:0; display:none; z-index:150;}
.nf-modal[aria-hidden="false"], .sr-modal[aria-hidden="false"]{display:block}
.nfm-backdrop,.srm-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5)}
.nfm-sheet,.srm-sheet{
  position:absolute; left:0; right:0; bottom:0;
  background:#0f1218; border-top-left-radius:16px; border-top-right-radius:16px;
  border-top:1px solid #21263a; transform:translateY(100%);
  transition:transform .25s ease; min-height:50vh; box-shadow:0 -20px 60px rgba(0,0,0,.5);
}
.nfm-sheet.show,.srm-sheet.show{transform:translateY(0)}
.nfm-head,.srm-head{padding:10px;border-bottom:1px solid #1d2236;text-align:center;position:relative}
.nfm-pull,.srm-pull{width:48px;height:4px;background:#2a2f43;border-radius:999px;margin:6px auto 10px}
.nfm-x,#srmClose{position:absolute;right:8px;top:8px;border:0;background:transparent;color:#e6e9f7;font-size:18px;cursor:pointer}
.nfm-list{padding:10px;display:grid;gap:8px}
.nfm-list .nf-item{padding:10px;border:1px solid var(--line);background:#11131a;border-radius:12px}
.srm-bar{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)
}
.srm-bar svg{width:18px;height:18px;opacity:.85}
#srmInput{
  flex:1;height:40px;border-radius:12px;border:1px solid #242a3f;background:#10131a;color:#fff;padding:0 12px
}
.srm-results{padding:10px;display:grid;gap:8px;max-height:50vh;overflow:auto}
.srm-item{
  display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#11131a;
  text-decoration:none; color:inherit;
}
.srm-item .av{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* =========================================================
   FEED — bases communes (couleurs unifiées)
   ========================================================= */
.ig-feed{padding:16px 0;}
.ig-container{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 340px;gap:24px;}
.ig-main{max-width:720px;margin-left:auto}
.timeline{display:grid;gap:22px}
.ig-post{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}

/* stories */
.ig-stories{margin-bottom:14px}
.stories-row{display:flex;gap:14px;list-style:none;margin:0;padding:0 6px}
.story{width:78px;text-align:center}
.story .story-btn{position:relative;border:0;background:transparent;cursor:pointer}
.story .ring{
  position:absolute;inset:-3px;border-radius:50%;padding:2px;
  background:
    radial-gradient(circle at 30% 30%, #ff7a7a, transparent 60%),
    conic-gradient(from 0deg, var(--accent-red), #ff98ab, var(--accent-red));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude
}
.story .ring.own{background:conic-gradient(#5cffb8,#32ffe3,#5cffb8)}
.story .avatar{width:70px;height:70px;border-radius:50%;object-fit:cover;display:block}
.story .plus{position:absolute;right:0;bottom:0;background:var(--accent-blue);border-radius:999px;width:20px;height:20px;display:grid;place-items:center;color:#fff;font-weight:900;line-height:1}
.story .label{margin-top:6px;font-size:12px;color:#cbd3f1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* head */
.post-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:10px}
.post-head .user{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.post-head .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.post-head .name{font-weight:700}
.post-head .time{color:var(--muted);font-size:12px}

/* follow */
.btn-follow{border:1px solid var(--line);background:transparent;color:#cfe;padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.btn-follow.is-following{background:var(--btn);color:var(--btn-ink)}

/* kebab */
.kebab{position:relative}
.more{border:0;background:transparent;color:#9aa4bd;font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;border-radius:8px}
.more:hover{background:#141828}
.k-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:180px;padding:6px;border:1px solid rgba(255,255,255,.08);background:#0f1116;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.45);z-index:5}
.k-item{display:block;width:100%;text-align:left;border:0;background:transparent;color:#e6e9f7;padding:8px 10px;border-radius:8px;cursor:pointer}
.k-item:hover{background:#141a2a}
.k-menu[hidden]{display:none!important}

/* media + like splash */
.post-media img{width:100%;display:block;background:#0b0d12}
.like-splash{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.like-splash::after{
  content:"❤";font-size:110px;line-height:1;opacity:0;transform:scale(.6);
  transition:transform .35s ease,opacity .35s ease;filter:drop-shadow(0 6px 20px rgba(255,0,80,.35))
}
.like-splash.show::after{opacity:1;transform:scale(1)}

/* actions */
.post-actions{display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.icon-heart,.icon-comment{width:28px;height:28px;border:0;background:transparent;cursor:pointer;position:relative}
.icon-heart::before,.icon-comment::before{content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center}
.icon-heart::before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75c-1.86-1.53-4.59-1.27-6.25.44L12 6.46l-1.25-1.27C9.08 3.47 6.36 3.22 4.5 4.75c-2.16 1.77-2.24 5-.19 6.86L12 20l7.69-8.39c2.05-1.86 1.97-5.09-.19-6.86Z' stroke='%23eaefff' stroke-width='1.5'/%3E%3C/svg%3E")}
.icon-heart.is-liked::before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 4.75c-1.86-1.53-4.59-1.27-6.25.44L12 6.46l-1.25-1.27C9.08 3.47 6.36 3.22 4.5 4.75c-2.16 1.77-2.24 5-.19 6.86L12 20l7.69-8.39c2.05-1.86 1.97-5.09-.19-6.86Z' fill='%23ff2f6a'/%3E%3C/svg%3E")}
.icon-comment::before{background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 19l3-3h11a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5A2 2 0 0 0 3 6v8a2 2 0 0 0 2 2Z' stroke='%23eaefff' stroke-width='1.5'/%3E%3C/svg%3E")}

/* liked by + caption + reacts */
.likedby{padding:2px 12px 8px}
.likedby-link{color:#e7eaf1;text-decoration:none}
.likedby-link b{font-weight:700}
.post-caption{padding:0 12px 8px;color:#dfe5ff}
.post-caption .userlink{color:#fff;font-weight:700;margin-right:6px;text-decoration:none}
.post-reacts{padding:0 12px 10px;display:flex;gap:8px;flex-wrap:wrap}
.post-reacts .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#121826;border:1px solid var(--line);color:#e5ebff;font-weight:700;font-size:12px}

/* compact comment bar */
.c-compact{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--line)}
.c-compact .open-comments{border:1px solid var(--line);background:#0f1116;color:#aeb6d8;border-radius:10px;padding:8px 12px;cursor:pointer}
.c-compact .open-comments:hover{background:#121624}
.c-compact .see-all{color:#9fb3ff;text-decoration:none;font-size:13px}

/* aside */
.ig-aside{position:sticky;top:16px;height:fit-content;align-self:start}
.me-mini{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:10px}
.me-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.me-mini .avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}
.me-mini .name{font-weight:700}
.me-mini .sub{color:var(--muted);font-size:12px}
.suggest{border:1px solid var(--line);border-radius:12px;background:var(--card)}
.s-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line)}
.s-head h3{font-size:14px;margin:0}
.s-list{list-style:none;margin:0;padding:8px}
.s-item{display:flex;align-items:center;justify-content:space-between;padding:8px;gap:8px;border-radius:10px}
.s-item:hover{background:#0f1320}
.s-user{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.s-user .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.s-user .name{font-weight:700}
.s-user .sub{color:#9aa4bd;font-size:12px}
.s-action .btn{border-radius:10px;padding:8px 10px;font-weight:700;cursor:pointer;border:1px solid var(--line)}
.s-action .btn.primary{background:var(--btn);color:var(--btn-ink)}
.s-action .btn.ghost{background:transparent;color:#cfe}

/* =========================================================
   VIEWER — modal desktop/tablette (palette unifiée)
   ========================================================= */
.pv-ov{position:fixed;inset:0;z-index:120;display:none}
.pv-ov.open{display:block}
.pv-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.pv-dlg{
  position:absolute;inset:4% 6%;
  display:grid;grid-template-columns:minmax(0,1fr) 380px;
  background:#0f1013;border:1px solid #1f2333;border-radius:14px;
  box-shadow:0 20px 80px rgba(0,0,0,.6);overflow:hidden;min-height:0;
}
.pv-media{
  display:grid;place-items:center;position:relative;
  background:
    radial-gradient(900px 60% at -30% -20%, rgba(255,51,85,.16), transparent 60%),
    #0b0c0f;
  border-right:1px solid #1f2333;
}
.pv-media img,.pv-media video{max-width:100%;max-height:80vh;object-fit:contain;background:#0b0c0f}

.pv-side{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;min-height:0}
.pv-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #1f2333}
.pv-user{display:flex;align-items:center;gap:10px}
.pv-av{width:32px;height:32px;border-radius:50%}
.pv-name{font-weight:700}
.pv-sub{font-size:12px;color:#9aa0a6}
.pv-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:12px 12px 6px;display:block;overscroll-behavior:contain}
.pv-scroll::-webkit-scrollbar{display:none}
.pv-scroll{scrollbar-width:none}

/* caption + footer */
.pv-caption{color:#e6e9f7;line-height:1.35;margin:6px 2px 12px;font-size:14px}
.cap-wrap{display:flex;align-items:flex-start;gap:10px}
.cap-av{width:26px;height:26px;border-radius:50%;object-fit:cover}
.cap-name{font-weight:800;margin-right:6px}
.cap-text{color:#dfe5ff}
.pv-footer{border-top:1px solid #1f2333;padding:8px 12px;display:grid;gap:8px;background:#0f1013;flex:0 0 auto}
.pv-likebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.icon-btn{border:0;background:transparent;cursor:pointer;padding:6px;border-radius:10px}
.icon-btn.liked .heart-icon::before{color:#ff2f6a}
.heart-icon::before{content:"❤";font-size:22px;display:inline-block}
.comment-icon::before{content:"💬";font-size:20px;display:inline-block}
.pv-likedby{margin-left:0;flex-basis:100%}
.pv-likedby-link{color:#e7eaf1;text-decoration:none}
.pv-likedby-link b{font-weight:700}
.pv-commentbar{position:relative;display:flex;align-items:center;gap:10px}
.pv-emoji-btn{border:0;background:transparent;cursor:pointer;font-size:20px;line-height:1;color:#fff}
.pv-commentbar input{flex:1;background:#11131a;border:1px solid #242a3f;color:#fff;border-radius:18px;padding:10px 12px}
.pv-publish{border:0;background:transparent;color:#7aa8ff;font-weight:700;cursor:default;opacity:.5}
.pv-publish.enabled{cursor:pointer;opacity:1}
.pv-emoji-panel{position:absolute;left:0;bottom:44px;background:#0f1013;border:1px solid #1f2333;border-radius:12px;box-shadow:0 16px 60px rgba(0,0,0,.5);width:320px;max-height:260px;overflow:auto;padding:8px;z-index:5}
.pv-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.pv-emoji-grid button{border:0;background:transparent;font-size:20px;cursor:pointer;line-height:1.1;padding:6px;border-radius:8px}
.pv-emoji-grid button:hover{background:#161b28}
.pv-comments-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pv-citem{display:flex;gap:10px;align-items:flex-start}
.pv-citem .avatar{width:28px;height:28px;border-radius:50%}
.pv-citem .bubble{background:transparent;border:0;border-radius:0;padding:0;flex:1}
.pv-citem .top{display:flex;align-items:center;gap:8px}
.pv-citem .name{font-weight:700}
.pv-citem .meta{color:#9aa0a6;font-size:.78rem}
.pv-citem .row{display:flex;align-items:center;gap:10px;margin-top:4px}
.pv-citem .right{margin-left:auto;display:flex;align-items:center;gap:6px}
.pv-c-like{border:0;background:transparent;cursor:pointer;font-size:16px;line-height:1}
.pv-c-like.is-liked{color:#ff2f6a}
.pv-c-del{border:0;background:transparent;color:#ffb3b3;cursor:pointer;font-size:.78rem}
.pv-heart-burst{position:absolute;inset:0;display:grid;place-items:center;font-size:120px;color:#ff2f6a;opacity:0;transform:scale(.6);pointer-events:none}
.pv-heart-burst.show{animation:pv-burst .8s ease forwards}
@keyframes pv-burst{0%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:scale(1.1)}40%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.2)}}

/* =========================================================
   GRAND MODAL "Mentions J’aime"
   ========================================================= */
.likes-ov{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:140;display:grid;place-items:center}
.likes-ov[hidden]{display:none}
.likes-dlg{width:min(680px,96vw);max-height:88vh;background:#0f1218;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.55)}
.lm-head{position:sticky;top:0;background:#0f1218;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:12px;padding:12px}
.lm-close{border:0;background:transparent;color:#fff;font-size:20px;cursor:pointer}
.lm-title{font-weight:800;font-size:16px}
.lm-sub{margin-left:auto;background:#121624;border:1px solid #1f2333;border-radius:999px;padding:4px 10px;color:#cfe}
.lm-body{max-height:calc(88vh - 56px);overflow:auto;padding:10px;display:grid;gap:8px}
.lm-item{position:relative;display:flex;align-items:center;gap:10px;padding:10px;background:#11131a;border:1px solid #242a3f;border-radius:12px}
.lm-item img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.lm-name{font-weight:700;cursor:default}
.lm-username{color:#9aa0a6;font-size:12px;cursor:default}
.lm-follow{
  margin-left:auto;border:0;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;
  color:#fff; background:linear-gradient(180deg, var(--accent-blue), #1f5ea6);
}
.lm-follow.is-following{background:#1a213a;color:#cfe}

/* =========================================================
   PROFILE PREVIEW (popover) — fond noir + bouton plein largeur
   ========================================================= */
#hover-pop{
  position:fixed; width:420px; max-width:96vw;
  background:#0b0c0f; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 24px 80px rgba(0,0,0,.6); padding:14px; z-index:10000;
  display:none; pointer-events:auto; backdrop-filter:saturate(1.05) blur(6px);
}
#hover-pop.show{display:block}
#hover-pop .hp-row,#hover-pop .hp-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
#hover-pop .hp-av{width:56px;height:56px;border-radius:50%;object-fit:cover}
#hover-pop .hp-names{display:grid;gap:2px;min-width:0}
#hover-pop .hp-disp{font-weight:800;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hover-pop .hp-usr{color:#9aa0a6;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hover-pop .hp-stats{
  display:grid;grid-template-columns:repeat(3,1fr);text-align:center;
  padding:10px 0 8px;margin:0 0 10px;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
}
#hover-pop .hp-stats b{display:block;font-weight:800;font-size:18px;color:var(--text)}
#hover-pop .hp-stats span{display:block;font-size:12px;color:#9aa0a6;margin-top:2px}
#hover-pop .hp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
#hover-pop .hp-grid a{display:block;border-radius:12px;overflow:hidden;aspect-ratio:1/1;background:#0b0d12}
#hover-pop .hp-grid img{width:100%;height:100%;object-fit:cover;display:block}
#hover-pop .hp-actions{margin-top:4px}
#hover-pop .hp-actions .btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;border-radius:12px;border:0;
  background:linear-gradient(100deg,var(--accent-red),var(--accent-blue));
  color:#04131b;font-weight:800;cursor:pointer;
  box-shadow:0 8px 24px rgba(163,24,45,.35), 0 8px 22px rgba(45,162,204,.25);
}
#hover-pop .hp-actions .btn.is-following{background:#1a213a;color:#cfe;box-shadow:none}
#hover-pop .hp-about{display:none !important}
#hover-pop .v-badge{margin-left:6px;vertical-align:-2px}

/* =========================================================
   Lecteur vidéo + Upload Toast (inchangés visuellement, thème OK)
   ========================================================= */
.dv-player{position:relative; background:#000; display:grid; place-items:center;}
.dv-player video{ width:100%; height:auto; display:block; background:#000; }
.dv-controls{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px; display:grid; gap:8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.75) 100%);
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.dv-player:hover .dv-controls, .dv-player.dv-show .dv-controls{ opacity:1; pointer-events:auto; }
.dv-row{ display:flex; align-items:center; gap:10px; }
.dv-btn{ border:0; background:rgba(255,255,255,.08); color:#fff; width:34px; height:34px; border-radius:8px; display:grid; place-items:center; cursor:pointer; }
.dv-btn:disabled{opacity:.5; cursor:not-allowed}
.dv-time{ color:#e6e9f7; font-size:12px; min-width:90px; text-align:center; }
.dv-slider{ -webkit-appearance:none; appearance:none; height:6px; width:100%; background: rgba(255,255,255,.18); border-radius:999px; outline:none; cursor:pointer; }
.dv-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25); }
.dv-slider::-moz-range-thumb{ width:14px; height:14px; border:none; border-radius:50%; background:#fff; }
.dv-progress{ position:relative; flex:1; display:flex; align-items:center; gap:8px; }
.dv-buffer{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:6px; background:rgba(255,255,255,.28); border-radius:999px; width:0%; }
.dv-seek{ position:relative; z-index:1; }
.dv-vol{ width:120px; } @media (max-width: 680px){ .dv-vol{ width:80px; } }
.dv-topbar{ position:absolute; left:0; right:0; top:0; padding:8px 10px; display:flex; justify-content:flex-end; gap:8px; background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,0)); opacity:0; transition:opacity .18s ease; pointer-events:none; }
.dv-player:hover .dv-topbar, .dv-player.dv-show .dv-topbar{ opacity:1; pointer-events:auto; }
.dv-tooltip{ position:absolute; bottom:42px; left:50%; transform:translateX(-50%); background:#0f1218; border:1px solid rgba(255,255,255,.08); color:#fff; padding:4px 8px; border-radius:6px; font-size:12px; display:none; }
.dv-btn:hover + .dv-tooltip{ display:block; }

/* Upload toast */
.up-toast{
  position:fixed; right:16px; bottom:16px; z-index:2000;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(15,18,24,.92); border:1px solid #21263a;
  box-shadow:0 12px 40px rgba(0,0,0,.45); backdrop-filter: blur(6px) saturate(1.05);
}
.up-toast[hidden]{display:none}
.up-ring{
  --p: 0;
  width:26px; height:26px; border-radius:50%;
  background: conic-gradient(#7aa8ff calc(var(--p)*1%), rgba(255,255,255,.18) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 60%, #000 61%); mask: radial-gradient(farthest-side, #0000 60%, #000 61%);
}
.up-text{color:#e6e9f7; font-weight:700}
.up-done .up-ring{ background:conic-gradient(#7fffba 100%, #7fffba 0); }
.up-done .up-text::after{ content:"  •  publié ✓"; color:#7fffba; font-weight:800; }
.up-fail .up-text::after{ content:"  •  échec"; color:#ff9aa8; font-weight:800; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px){
  .layout{grid-template-columns: 1fr}
  .side{display:none}
  .main{grid-column:1 / -1}
  .mbar{display:flex}
  .content{padding:16px 14px 74px}
  .notif-flyout,.search-flyout{display:none!important}
}
@media (max-width:480px){
  .post-head .time{display:none}
  .stories-row{gap:10px}
  .story{width:72px}
  .story .avatar{width:64px;height:64px}
}
/* Viewer plein écran tablette/mobile */
@media (max-width:1024px){
  .pv-dlg{inset:0;grid-template-columns:1fr}
  .pv-media{border-right:0;border-bottom:1px solid #1f2333}
}

/* ===== Patch complémentaire — à coller en bas de base.css ===== */

/* 1) Messages flash (utilisés par base.html) */
.flash-wrap{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:2000; display:grid; gap:8px;
}
.flash{
  padding:10px 14px; border-radius:12px;
  background:#11131a; border:1px solid #242a3f; color:var(--text);
  box-shadow:0 10px 40px rgba(0,0,0,.45);
}
.flash.success{border-color:#2d6a4f; color:#b8f2c8}
.flash.error  {border-color:#7f1d1d; color:#ffc9c9}
.flash.info   {border-color:#1e3a8a; color:#c7d2fe}

/* 2) Pages plein écran (auth gate / register) */
body.is-authgate .layout,
body.is-register .layout{ display:block; }
body.is-authgate .content,
body.is-register .content{
  max-width:560px; margin:10vh auto; padding:24px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}

/* 3) Alias pour la variante de sidebar utilisée dans ton HTML */
.side.side--blend{
  background:
    linear-gradient(180deg, rgba(18,20,26,.88), rgba(11,12,15,.88)),
    radial-gradient(900px 60% at -30% -20%, rgba(255,51,85,.10), transparent 60%),
    radial-gradient(800px 60% at 120% -10%, rgba(45,162,204,.08), transparent 60%);
}


/* =========================================================
   IMMERSION++ — Calques d'ambiance & glow Rouge/Bleu partout
   (appliqué à toutes les pages sauf la landing)
   ========================================================= */

/* 0) Assure que le contenu passe DEVANT les calques */
.layout{ position:relative; z-index:1; }

/* 1) Halos puissants + lignes animées (comme la landing) */
body:not(.is-landing)::before,
body:not(.is-landing)::after{
  content:""; position:fixed; inset:0; pointer-events:none;
}
body:not(.is-landing)::before{
  z-index:0;
  background:
    radial-gradient(1600px 800px at 12% -10%, rgba(255,51,85,.22), transparent 60%),
    radial-gradient(1400px 740px at 88% -8%, rgba(45,162,204,.16), transparent 55%);
  animation:haloPulse 12s ease-in-out infinite alternate;
}
@keyframes haloPulse{
  0%{opacity:.55; transform:translate3d(0,0,0) scale(1)}
  100%{opacity:.78; transform:translate3d(0,-6px,0) scale(1.02)}
}
body:not(.is-landing)::after{
  z-index:0; mix-blend-mode:soft-light; opacity:.22;
  background:
    /* scanlines verticales */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 70px),
    /* diagonales */
    repeating-linear-gradient(-35deg,
      rgba(255,255,255,.045) 0 2px, rgba(255,255,255,0) 2px 90px);
  animation:
    hlMoveX 26s linear infinite,
    hlMoveY 32s linear infinite;
}
@keyframes hlMoveX{from{background-position:0 0,0 0} to{background-position:320px 0,0 0}}
@keyframes hlMoveY{from{background-position:0 0,0 0} to{background-position:0 420px,0 280px}}

/* 2) Quelques “sparkles” très légers (sans DOM en plus) */
.layout::before{
  content:""; position:fixed; inset:-10vh -5vw; z-index:0; pointer-events:none;
  background:
    radial-gradient(2px 2px at 12% 8%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(2px 2px at 78% 12%, rgba(200,218,255,.28), transparent 60%),
    radial-gradient(2px 2px at 42% 18%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(2px 2px at 65% 22%, rgba(200,218,255,.26), transparent 60%);
  filter:drop-shadow(0 0 8px rgba(255,255,255,.25));
  animation:sparkleShift 18s linear infinite;
}
@keyframes sparkleShift{from{transform:translateY(0)} to{transform:translateY(40px)}}

/* 3) Sidebar : liseré gradient + état actif “barre néon” */
.side{ position:fixed; }
.side::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:1px;
  background:linear-gradient(180deg, rgba(255,51,85,.55), rgba(45,162,204,.55));
  opacity:.45;
}
.nav-btn{ position:relative; }
.nav-btn.is-active::before{
  content:""; position:absolute; left:6px; top:6px; bottom:6px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-red), var(--accent-blue));
  box-shadow:0 0 16px rgba(255,51,85,.35), 0 0 16px rgba(45,162,204,.25);
}

/* 4) Cartes / modales / viewer : bordure-gradient + ombres profondes */
.ig-post,
.me-mini,
.suggest,
.nf-item,
.srm-item,
.sr-item,
.likes-dlg,
.profile-dlg,
.pv-dlg{
  border:1px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(140deg, rgba(255,51,85,.35), rgba(45,162,204,.35)) border-box;
  box-shadow:
    0 16px 60px rgba(0,0,0,.40),
    0 10px 30px rgba(255,51,85,.08),
    0 10px 30px rgba(45,162,204,.08);
}
.ig-post{ transition:transform .18s ease, box-shadow .18s ease; }
.ig-post:hover{
  transform:translateY(-1px);
  box-shadow:
    0 18px 70px rgba(0,0,0,.45),
    0 12px 32px rgba(255,51,85,.12),
    0 12px 32px rgba(45,162,204,.12);
}

/* 5) Boutons primaires “gradient” (suggestions, follow du modal, etc.) */
.s-action .btn.primary,
.lm-follow{
  border:0;
  background:linear-gradient(100deg, var(--accent-red), var(--accent-blue));
  color:#04131b;
  box-shadow:0 8px 24px rgba(163,24,45,.30), 0 8px 22px rgba(45,162,204,.22);
}
.s-action .btn.primary:hover,
.lm-follow:hover{ filter:brightness(1.05); }

/* 6) Viewer : fond média avec halo R/B plus marqué */
.pv-media{
  background:
    radial-gradient(900px 60% at -30% -20%, rgba(255,51,85,.18), transparent 60%),
    radial-gradient(900px 60% at 130% -10%, rgba(45,162,204,.12), transparent 55%),
    #0b0c0f;
}

/* 7) Aside widgets légèrement mis en valeur */
.me-mini, .suggest{ transition:box-shadow .18s ease, transform .18s ease; }
.me-mini:hover, .suggest:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 46px rgba(0,0,0,.38),
    0 10px 26px rgba(255,51,85,.10),
    0 10px 26px rgba(45,162,204,.10);
}

/* ===== Kebab du viewer à GAUCHE + styles modals édition/suppression (scopés) ===== */
.pv-menu--left{margin-right:auto}
.pv-menu--left .pv-pop{left:12px; right:auto}

/* Patch : sidebar sans fond (fondu dans le décor) */
.side,
.side.side--blend{
  background: transparent !important;   /* enlève les halos/gradients */
  backdrop-filter: none !important;     /* optionnel : supprime l'effet verre */
}

/* (optionnel) vire aussi le liseré néon à droite si tu le trouves trop visible */
.side::after{ display:none !important; }

/* ==== Sidebar : états hover & actif assortis au thème ==== */

/* reset de base (pas de fond par défaut) */
.side .nav-btn,
.side .nav-link-like{
  background: transparent !important;
  border: 0 !important;
  color: var(--text);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* hover : léger voile dégradé R/B + fin liseré interne */
.side .nav-btn:hover,
.side .nav-link-like:hover{
  background:
    radial-gradient(120% 200% at 0% 50%, rgba(255,51,85,.10), transparent 60%),
    radial-gradient(120% 200% at 100% 50%, rgba(45,162,204,.10), transparent 60%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  color:#fff;
}

/* actif : garde la “barre néon” (déjà dans base.css : ::before),
   et ajoute un fond très léger + texte/icônes plus lumineux */
.side .nav-btn.is-active,
.side .nav-link-like.is-active{
  background: linear-gradient(100deg, rgba(255,51,85,.12), rgba(45,162,204,.12)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color:#fff;
  outline:0 !important;
}

/* icônes un peu glow sur hover/actif */
.side .nav-btn:hover .nav-ic svg,
.side .nav-link-like:hover .nav-ic svg,
.side .nav-btn.is-active .nav-ic svg,
.side .nav-link-like.is-active .nav-ic svg{
  filter:
    drop-shadow(0 0 8px rgba(255,51,85,.15))
    drop-shadow(0 0 8px rgba(45,162,204,.15));
}

/* accessibilité : anneau de focus propre */
.side .nav-btn:focus-visible,
.side .nav-link-like:focus-visible{
  outline:0;
  box-shadow: inset 0 0 0 2px rgba(122,168,255,.45);
  border-radius:12px;
}

/* === Viewer: commentaires — wrap + pas de scrollbar horizontale === */
.pv-scroll{
  overflow-y: auto;
  overflow-x: hidden;          /* supprime la barre horizontale */
}

.pv-side,
.pv-scroll,
.pv-comments-list,
.pv-citem,
.pv-citem .top,
.pv-citem .row{ min-width: 0; }   /* évite les débordements en grid/flex */
.pv-citem .top{ flex-wrap: wrap; } /* author + meta peuvent revenir à la ligne */

/* Le texte du commentaire se casse proprement */
.pv-citem .row{ display:block; }   /* pas besoin de flex ici */
.pv-citem .row > div{
  max-width: 100%;
  white-space: pre-wrap;           /* garde les retours à la ligne */
  word-break: break-word;          /* casse les très longs mots */
  overflow-wrap: anywhere;         /* casse aussi les longues URLs/mentions */
}

/* === Viewer : colonne droite = header / scroll / footer, plein hauteur === */
#pvOv .pv-dlg{
  /* assure une hauteur connue et que les colonnes s'étirent sur 100% */
  height: calc(100vh - 8%);           /* 4% haut + 4% bas => 8% */
  align-items: stretch;
  box-sizing: border-box;
}

/* colonne droite en 3 lignes : head / scroll (1fr compressible) / footer */
#pvOv .pv-side{
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto;
  height: 100%;
  min-height: 0;
}

/* zone scroll des commentaires : colle au footer + pas de scrollbar visible */
#pvOv .pv-scroll{
  grid-row: 2;
  min-height: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 12px 0;               /* pas d'espace inutile avant le footer */
  scrollbar-width: none;              /* Firefox : cache la barre */
}
#pvOv .pv-scroll::-webkit-scrollbar{  /* Chrome/Safari/Edge : cache la barre */
  width: 0 !important;
  height: 0 !important;
}

/* anti-espaces fantômes */
#pvOv .pv-comments-list{ margin-bottom: 0; }


/* Colonne droite = head / scroll / footer (prend toute la hauteur) */
#pvOv .pv-side{
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;                 /* évite une 2e scrollbar sur la colonne */
}

/* Zone scroll : touche le footer + scrollbar invisible */
#pvOv .pv-scroll{
  grid-row: 2;
  min-height: 0 !important;
  padding: 12px 12px 0 !important;  /* plus d'espace perdu en bas */
  overflow-y: auto;
  overflow-x: hidden;

  /* cacher la barre de scroll sur tous moteurs */
  -ms-overflow-style: none;         /* IE/ancien Edge */
  scrollbar-width: none;            /* Firefox */
}
#pvOv .pv-scroll::-webkit-scrollbar{ /* Chrome / Safari / Edge Chromium */
  width: 0 !important;
  height: 0 !important;
}

/* PV – zone commentaires : une seule scrollbar (cachée) */
#pvOv .pv-side{ overflow: hidden; }                /* évite une 2e barre sur la colonne */

#pvOv .pv-scroll{
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;     /* IE/ancien Edge */
  scrollbar-width: none;        /* Firefox */
}
#pvOv .pv-scroll::-webkit-scrollbar{  /* Chrome / Safari / Edge Chromium */
  width: 0 !important;
  height: 0 !important;
}


/* =========================================================
   MOBILE PATCH — DarkInsta (coller en fin de base.css)
   ========================================================= */

/* --------- Généraux mobile --------- */
@media (max-width: 960px){
  :root{
    --rail-collapsed: 72px;
  }

  /* Contenu jamais sous la barre mobile + safe-area iOS */
  .content{
    padding: 14px 12px calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* Barre mobile: plus haute, centrée, safe-area */
  .mbar{
    display:flex;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    align-items: center;
  }
  .mb-ico{ width: 20%; }
  .mb-ico-svg{ width: 28px; height: 28px; }
  .mb-ico--plus{ transform: translateY(-4px); }
  .mb-ico--avatar img{ width: 30px; height: 30px; }

  /* Feed: 1 colonne, aside empilé */
  .ig-container{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 720px; /* confort mobile/tablette */
    padding: 0 2px;
  }
  .ig-main{ max-width: 100%; margin: 0 !important; }
  .ig-aside{ position: static; top: auto; }

  /* Stories plus compactes */
  .ig-stories{ margin: 6px 0 10px; }
  .stories-row{ gap: 10px; padding: 0 2px; }
  .story{ width: 68px; }
  .story .avatar{ width: 62px; height: 62px; }
  .story .label{ font-size: 11px; }

  /* Post: gros boutons tactiles */
  .post-actions{ gap: 12px; }
  .icon-heart,.icon-comment{
    width: 36px; height: 36px; padding: 4px; border-radius: 12px;
  }
  .icon-heart::before,.icon-comment::before{
    transform: scale(1.05);
  }

  /* Liked by / caption: lisible, wrap OK */
  .likedby, .post-caption, .post-reacts{ padding-left: 10px; padding-right: 10px; }
  .post-caption{ font-size: 14px; line-height: 1.45; word-break: break-word; }

  /* Viewer plein écran, scroll propre, safe-area */
  .pv-ov{ z-index: 160 !important; } /* au-dessus des modals et mbar */
  .pv-dlg{
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important; /* unités viewport stables mobile */
    grid-template-columns: 1fr !important;
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
  }
  .pv-media{ border-right: 0; border-bottom: 1px solid #1f2333; }
  .pv-side{
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr) calc(56px + env(safe-area-inset-bottom, 0px));
    min-height: 0; overflow: hidden;
  }
  .pv-scroll{
    min-height: 0 !important;
    overflow-y: auto; overflow-x: hidden;
    padding: 10px 12px 0 !important;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .pv-scroll::-webkit-scrollbar{ width:0; height:0; }
  .pv-footer{
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  /* Popover profil → bottom-sheet mobile, lisible et cliquable */
  #hover-pop{
    left: 12px !important; right: 12px !important;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important; transform: none !important;
    width: auto !important; max-width: none !important;
    border-radius: 16px; padding: 14px 14px 12px;
    background: #0b0c0f; border: 1px solid var(--line);
  }
  #hover-pop .hp-stats b{ font-size: 16px; }
  #hover-pop .hp-grid{ gap: 6px; }
  #hover-pop .hp-actions .btn{
    padding: 12px; border-radius: 12px;
  }

  /* Badge vérifié: toujours visible sur fond sombre */
  .v-badge, #hover-pop .v-badge{
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: linear-gradient(180deg, #5cc8ff, #2a6bff);
    color: #001222; font-weight: 900; font-size: 12px;
    box-shadow: 0 0 0 2px #0b0c0f;
  }

  /* Modals Recherche/Notifs: au-dessus de la barre, safe-area */
  .nf-modal,.sr-modal{ z-index: 170 !important; }
  .nfm-sheet,.srm-sheet{
    min-height: 60vh;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .nfm-list,.srm-results{ max-height: 50vh; }

  /* Grand modal Likes: plein écran sur petit écran */
  .likes-ov{ z-index: 180 !important; }
  .likes-dlg{
    width: 100vw !important;
    max-height: 100svh !important;
    height: 100svh !important;
    border-radius: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
  }
  .lm-body{ max-height: calc(100svh - 56px) !important; }

  /* Désactive les flyouts desktop */
  .notif-flyout,.search-flyout{ display: none !important; }
}

/* --------- Ultra petit (< 420px) — encore plus compact --------- */
@media (max-width: 420px){
  .story{ width: 64px; }
  .story .avatar{ width: 58px; height: 58px; }
  .post-head{ padding: 8px 10px; }
  .post-actions{ padding: 8px 10px; }
  .pv-commentbar input{ font-size: 16px; } /* évite zoom iOS */
  .s-user .avatar{ width: 32px; height: 32px; }
  .s-item{ padding: 6px; }
}

/* --------- Orientation paysage mobile --------- */
@media (max-width: 960px) and (orientation: landscape){
  .content{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  .mbar{ padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
}

/* --------- Performances mobile: halos atténués --------- */
@media (max-width: 960px){
  body:not(.is-landing)::before{ opacity: .5; filter: blur(.2px); }
  body:not(.is-landing)::after{ opacity: .16; }
}

/* --------- Accessibilité tactile (toutes tailles) --------- */
@media (hover: none) and (pointer: coarse){
  .nav-btn:hover,.nav-link-like:hover{ background: transparent !important; }
  .icon-btn, .k-item, .s-action .btn{ min-height: 44px; }
}

/* --------- Safe-area global fallback (si pas d’env) --------- */
@supports not (padding-bottom: env(safe-area-inset-bottom)){
  .mbar{ padding-bottom: 8px; }
  .content{ padding-bottom: 82px; }
  .pv-footer{ padding-bottom: 10px; }
}