/* ═══ Base du composant (règles communes) ; les variantes V2 suivent ═══ */
/* ─── Navbar ─────────────────────────────────────────────── */
.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 16px;
  max-width: 680px;
  margin: 0 auto;
}
.navbar-logo {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.5px;
  line-height: 1;
}
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar-page-title {
  display: none; /* caché sur mobile */
}

/* ─── Bottom nav (mobile) ─────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
  z-index: 100;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 12px;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  flex: 1;
}
.bottom-nav a.active,
.bottom-nav a:hover {
  color: var(--color-accent);
}
.bottom-nav .material-icons { font-size: 22px; }

/* ─── Navbar left group ──────────────────────────────────── */
.navbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ─── Hamburger button ────────────────────────────────────── */
.btn-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-text);
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
}
.btn-hamburger:hover { background: var(--color-bg); }
.btn-hamburger .material-icons { font-size: 22px; }
.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--color-text);
  transition: background 0.15s;
  padding: 0;
  line-height: 1;
  text-decoration: none;
}
.btn-back:hover { background: var(--color-bg); }
.btn-back .material-icons { font-size: 22px; }

.hamburger-overlay.open {
  display: block;
  opacity: 1;
}

/* ─── Hamburger panel (drawer from LEFT) ─────────────────── */
.hamburger-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(280px, 85vw);
  background: var(--color-surface);
  z-index: 200;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0,0,0,0.12);
}
.hamburger-panel.open { transform: translateX(0); }

.hamburger-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}
.btn-close-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background 0.15s;
}
.btn-close-panel:hover { background: var(--color-bg); }
.btn-close-panel .material-icons { font-size: 20px; }

.hamburger-body { flex: 1; overflow-y: auto; padding: 8px 0; }

.social-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-bg);
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s;
}
.social-btn:hover { background: var(--color-border); }
.social-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-icon svg { width: 16px; height: 16px; fill: var(--color-text); }

/* ─── Hamburger bottom (logout + footer pinned) ──────────── */
.hamburger-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hamburger-footer {
  padding: 8px 16px 16px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  opacity: 0.45;
  text-align: center;
  line-height: 1.9;
}
.hamburger-credit-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── Icon round button (profile 3-dot, etc.) ────────────── */
.btn-icon-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--color-text-muted);
  transition: background 0.15s;
  flex-shrink: 0;
}
.btn-icon-round:hover { background: var(--color-bg); }
.btn-icon-round .material-icons { font-size: 20px; }

.app-header--v2 {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-none);
}

.app-header--v2 .navbar-inner {
  min-height: 52px;
}

.app-header--v2 .navbar-logo,
.app-header--v2 .hamburger-brand {
  color: var(--color-text);
  font-size: 1.1875rem;
  font-weight: 720;
  letter-spacing: 0;
}

.app-header--v2 .navbar-logo {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  text-decoration: none;
}

.app-header--v2 .navbar-logo__mark {
  display: block;
  height: 24px;
  width: 24px;
}

.app-header--v2 .btn-icon-round,
.app-header--v2 .btn-hamburger,
.app-header--v2 .btn-close-panel,
.app-header--v2 .btn-back {
  color: var(--color-text-muted);
}

.app-header--v2 .btn-icon-round:hover,
.app-header--v2 .btn-hamburger:hover,
.app-header--v2 .btn-close-panel:hover,
.app-header--v2 .btn-back:hover {
  background: var(--color-surface-soft);
  color: var(--color-accent);
}

.app-header--v2 .navbar-page-title {
  color: var(--color-text);
  font-weight: 650;
  letter-spacing: 0;
}

.bottom-nav--v2 {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  height: calc(64px + env(safe-area-inset-bottom));
  padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom);
}

.bottom-nav--v2 .bottom-nav__item {
  min-width: 0;
  min-height: 52px;
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  line-height: 1.15;
  font-size: 0.6875rem;
  font-weight: 560;
  gap: 3px;
}

.bottom-nav--v2 .bottom-nav__icon {
  color: currentColor;
  font-size: 22px;
}

/* Actif : icône pleine + encre, sans pastille (le remplissage suffit) */
.bottom-nav--v2 .bottom-nav__item.active {
  background: transparent;
  color: var(--color-accent);
}

.bottom-nav--v2 .bottom-nav__item.active .bottom-nav__icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

@media (hover: hover) {
  .bottom-nav--v2 .bottom-nav__item:hover {
    background: var(--color-surface-soft);
  }
}

.bottom-nav--v2 .bottom-nav__item--publish {
  color: var(--color-text);
  font-weight: 660;
}

/* Notification non lue : un point encre, jamais rouge */
.bottom-nav--v2 .bottom-nav__icon-wrap {
  display: inline-flex;
  position: relative;
}

.bottom-nav--v2 .bottom-nav__dot {
  background: var(--color-accent);
  border: 1.5px solid var(--color-surface);
  border-radius: var(--radius-full);
  height: 8px;
  position: absolute;
  right: -2px;
  top: 0;
  width: 8px;
}

.bottom-nav--v2 .bottom-nav__dot[hidden] {
  display: none;
}

/* R5 : écran sans barre en bas → pas d'espace réservé ni de décalage pour la nav */
body.no-bottom-bar .main {
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
}

/* Titre d'un écran poussé, à côté de la flèche retour (ex. « Diskisyon ») */
.navbar-title {
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: 680;
  margin-left: var(--space-1);
}

/* ─── Hamburger V2 (handoff : screens/hamburger.html) ─── */
.hamburger-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 199;
  opacity: 0;
  transition: opacity 0.25s;
  background: rgba(20, 22, 28, 0.34);
}

.hamburger-panel--v2 {
  box-shadow: var(--shadow-dialog);
  max-width: 330px;
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.35, 1);
  width: 86%;
}

.hamburger-panel--v2 .hamburger-header {
  border-bottom: 1px solid var(--color-border);
  padding: 12px 10px 12px 18px;
}

.hamburger-panel--v2 .hamburger-brand {
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 720;
}

.hamburger-panel--v2 .btn-close-panel {
  color: var(--color-text-muted);
  height: 44px;
  width: 44px;
}

.hamburger-panel--v2 .hamburger-body {
  padding: 8px 0 4px;
}

.hamburger-panel--v2 .pwa-install-card {
  margin: 8px 16px !important;
}

/* Carte « Pataje Tripotay » */
.share-card {
  align-items: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 12px;
  margin: 8px 16px;
  padding: 13px 14px;
  text-align: left;
  width: calc(100% - 32px);
}

.share-card > .material-icons {
  color: var(--color-accent);
}

.share-card__text small {
  color: var(--color-text-subtle);
  display: block;
  font-size: var(--text-xs);
}

.share-card__text b {
  font-size: 0.9375rem;
  font-weight: 680;
}

@media (hover: hover) {
  .share-card:hover {
    background: var(--color-surface-soft);
  }
}

.hamburger-panel--v2 .social-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 0 16px;
}

.hamburger-panel--v2 .social-btn {
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 580;
  min-height: 44px;
  padding: 11px 12px;
}

.hamburger-panel--v2 .social-icon svg {
  fill: var(--color-text);
}

.hamburger-panel--v2 .hamburger-bottom {
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

.hamburger-panel--v2 .hamburger-footer {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  line-height: 1.6;
  padding: 18px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .hamburger-panel--v2 {
    transition: none;
  }
}

/* ─── Bannière de bienvenue (1re visite, sans compte) ─── */
.welcome {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 14px 16px 4px;
  padding: 18px 16px;
  position: relative;
}

.welcome[hidden] {
  display: none;
}

.welcome__title {
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 40px 6px 0;
}

.welcome__text {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
  margin: 0 0 16px;
}

.welcome__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.welcome__close {
  align-items: center;
  background: none;
  border: 0;
  color: var(--color-text-subtle);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  position: absolute;
  right: 4px;
  top: 4px;
  width: 44px;
}

/* ═══ R9 — Coquille responsive V2 (body.v2-shell), à la Threads ═══════════════
   < 768px    : mobile / petite tablette — en-tête avec hamburger, barre du bas sur les écrans racines (R5)
   768–1279   : rail à icônes à gauche (bouton Meni en bas pour les liens), colonne, zone droite avec (+)
   ≥ 1280px   : barre latérale avec libellés et liens en bas (pas de hamburger), colonne, zone droite avec (+)
   La colonne est centrée sur la fenêtre : les deux zones latérales ont la même largeur.
   Zone droite : vide sauf le (+) — réservée plus tard à des suggestions de personnes / catégories,
   jamais de « tendances » (anti-dopamine). */
:root {
  --rail-w: 0px;
  /* Colonne de 680px au plus, en laissant au moins la largeur du rail de chaque côté */
  --col-w: min(680px, 100vw - 2 * var(--rail-w));
  /* Bord gauche de la colonne : centrée sur la fenêtre, sans jamais passer sous le rail */
  --col-left: max(var(--rail-w), (100vw - var(--col-w)) / 2);
}

@media (min-width: 768px) {
  :root {
    --rail-w: 76px;
  }
}

@media (min-width: 1280px) {
  :root {
    /* Assez large pour que les liens du bas tiennent sur deux lignes ; à 1280px la zone gauche
       fait exactement 300px, la colonne reste donc centrée */
    --rail-w: 300px;
  }
}

/* Éléments propres au rail : invisibles sur mobile */
.v2-shell .rail__brand,
.v2-shell .rail__menu,
.v2-shell .rail__footer,
.v2-shell .side-fab {
  display: none;
}

/* Sur mobile les destinations restent des enfants directs de la barre */
.v2-shell .rail__items {
  display: contents;
}

/* Écran poussé : pas de barre du bas (R5) — le même élément sert de rail sur desktop */
.v2-shell .bottom-nav--rail-only {
  display: none;
}

/* ── Tablette : on garde la barre du bas (annule la barre latérale héritée) ── */
@media (min-width: 600px) and (max-width: 767px) {
  .v2-shell .bottom-nav--v2 {
    border-right: 0;
    border-top: 1px solid var(--color-border);
    bottom: 0;
    flex-direction: row;
    height: calc(64px + env(safe-area-inset-bottom));
    justify-content: space-around;
    left: 0;
    padding: var(--space-1) var(--space-2) env(safe-area-inset-bottom);
    right: 0;
    top: auto;
    width: auto;
  }

  .v2-shell .bottom-nav--v2 .nav-label {
    display: inline;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item {
    flex: 1;
    flex-direction: column;
    font-size: 0.6875rem;
    gap: 3px;
    height: auto;
    margin: 0;
    max-width: 120px;
    min-height: 52px;
    width: auto;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__icon {
    font-size: 22px;
  }

  .v2-shell .main {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .v2-shell.no-bottom-bar .main {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }

  .v2-shell .btn-hamburger,
  .v2-shell .btn-back {
    border-radius: var(--radius-full);
    width: 44px;
  }

  .v2-shell .navbar-page-title {
    display: none;
  }
}

/* ── ≥ 768px : rail à gauche (icônes seules jusqu'à 1279px) ── */
@media (min-width: 768px) {
  .v2-shell .bottom-nav--v2,
  .v2-shell .bottom-nav--rail-only {
    align-items: center;
    background: var(--color-bg);
    border: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
    height: auto;
    justify-content: flex-start;
    left: 0;
    /* Pas de marge en haut : le logo occupe la même bande de 52px que l'en-tête de la colonne */
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    position: fixed;
    right: auto;
    top: 0;
    width: var(--rail-w);
    z-index: 110;
  }

  /* Le logo : 48px de large, et la hauteur de l'en-tête (52px) pour être centré sur la même
     ligne que le titre et l'icône de recherche de la colonne : il se lit comme l'en-tête du site */
  .v2-shell .bottom-nav--v2 .rail__brand {
    align-items: center;
    background: none;
    border-radius: 12px;
    color: var(--color-text);
    display: flex;
    flex: none;
    flex-direction: row;
    font-size: 0;
    gap: 10px;
    height: 52px;
    justify-content: center;
    margin: 0;
    text-decoration: none;
    width: 48px;
  }

  .v2-shell .rail__brand img {
    flex: none;
    transition: transform 0.15s ease;
  }

  .v2-shell .rail__brand:hover img {
    transform: scale(1.06);
  }

  .v2-shell .rail__name {
    display: none;
  }

  .v2-shell .rail__items {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item {
    align-items: center;
    border-radius: var(--radius-md);
    flex: none;
    flex-direction: row;
    height: 52px;
    justify-content: center;
    margin: 0;
    padding: 0;
    width: 60px;
  }

  /* Icônes seules ; le libellé reste lu par les lecteurs d'écran */
  .v2-shell .bottom-nav--v2 .nav-label {
    clip: rect(0 0 0 0);
    display: block;
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__icon {
    font-size: 27px;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item:hover,
  .v2-shell .rail__menu:hover {
    background: var(--color-surface-soft);
  }

  .v2-shell .rail__menu {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-subtle);
    cursor: pointer;
    display: flex;
    height: 52px;
    justify-content: center;
    margin-top: auto;
    width: 60px;
  }

  .v2-shell .rail__menu:hover {
    color: var(--color-text);
  }

  .v2-shell .rail__menu .material-icons {
    font-size: 27px;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__dot {
    right: -3px;
    top: 1px;
  }

  .v2-shell .main,
  .v2-shell.no-bottom-bar .main {
    padding-bottom: var(--space-10);
  }

  /* Le logo et la navigation sont dans le rail : pas de hamburger ni de logo dans l'en-tête */
  .v2-shell .btn-hamburger,
  .v2-shell .navbar-logo,
  .v2-shell .navbar-page-title {
    display: none;
  }

  .v2-shell .btn-back {
    border-radius: var(--radius-full);
    width: 44px;
  }

  /* (+) Pibliye : seul élément de la zone droite, centré dans celle-ci */
  .v2-shell .side-fab {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    bottom: calc(24px + env(safe-area-inset-bottom));
    box-shadow: var(--shadow-snack);
    color: var(--color-text);
    display: flex;
    height: 60px;
    justify-content: center;
    left: calc(var(--col-left) + var(--col-w) + (100vw - var(--col-left) - var(--col-w) - 60px) / 2);
    position: fixed;
    text-decoration: none;
    transition: transform 0.15s ease;
    width: 60px;
    z-index: 105;
  }

  .v2-shell .side-fab:hover {
    transform: scale(1.05);
  }

  .v2-shell .side-fab .material-icons {
    font-size: 28px;
  }
}

/* ── 768–1279px : le libellé masqué devient une infobulle au survol / au focus clavier ── */
@media (min-width: 768px) and (max-width: 1279px) {
  .v2-shell .bottom-nav--v2 .bottom-nav__item:hover .nav-label,
  .v2-shell .bottom-nav--v2 .bottom-nav__item:focus-visible .nav-label {
    background: var(--color-text);
    border-radius: var(--radius-sm);
    clip: auto;
    color: var(--color-bg);
    font-size: var(--text-xs);
    font-weight: 600;
    height: auto;
    left: calc(100% + 8px);
    line-height: 1;
    overflow: visible;
    padding: 6px 8px;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    z-index: 1;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item {
    position: relative;
  }
}

/* ── ≥ 1280px : barre latérale avec libellés et liens en bas, sans hamburger ── */
@media (min-width: 1280px) {
  .v2-shell .bottom-nav--v2,
  .v2-shell .bottom-nav--rail-only {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  }

  .v2-shell .bottom-nav--v2 .rail__brand {
    justify-content: flex-start;
    padding: 0 12px;
    width: auto;
  }

  .v2-shell .rail__name {
    display: inline;
    font-size: 1.25rem;
    font-weight: 720;
  }

  .v2-shell .rail__items {
    align-items: stretch;
    gap: 2px;
    max-width: 244px;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item {
    font-size: 0.9375rem;
    font-weight: 560;
    gap: 14px;
    height: 48px;
    justify-content: flex-start;
    padding: 0 12px;
    width: auto;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__item.active {
    font-weight: 680;
  }

  .v2-shell .bottom-nav--v2 .nav-label {
    clip: auto;
    display: inline;
    height: auto;
    overflow: visible;
    position: static;
    width: auto;
  }

  .v2-shell .bottom-nav--v2 .bottom-nav__icon {
    font-size: 25px;
  }

  .v2-shell .rail__menu,
  .v2-shell .hamburger-panel,
  .v2-shell .hamburger-overlay {
    display: none;
  }

  /* Liens (ancien contenu du hamburger) */
  .v2-shell .rail__footer {
    color: var(--color-text-subtle);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-xs);
    gap: 4px 12px;
    line-height: 1.6;
    margin-top: auto;
    padding: 0 12px;
  }

  .v2-shell .bottom-nav--v2 .rail__footer a {
    background: none;
    border-radius: 0;
    color: var(--color-text-muted);
    display: inline;
    flex: none;
    font-size: inherit;
    height: auto;
    margin: 0;
    padding: 0;
    text-decoration: none;
    width: auto;
  }

  .v2-shell .bottom-nav--v2 .rail__footer a:hover {
    color: var(--color-accent);
  }

  .v2-shell .rail__footer span {
    flex-basis: 100%;
  }
}

/* Raccourci clavier affiché dans les libellés */
kbd {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 0.6875rem;
  padding: 0 5px;
}

/* ── Colonne de contenu (≥ 600px) : même fond que sur mobile, délimitée par une bordure ──
   En-tête, barre de recherche, contenu, barre de réponse et snackbar partagent la même largeur. */
@media (min-width: 600px) {
  /* Flèche retour collée au titre de l'écran */
  .v2-shell .navbar-left {
    gap: 0;
  }

  .v2-shell .post-card {
    margin-bottom: 12px;
  }

  .v2-shell .main,
  .v2-shell .navbar,
  .v2-shell .search-bar {
    background: var(--color-bg);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-sizing: border-box;
    margin-left: var(--col-left);
    max-width: var(--col-w);
    width: 100%;
  }

  .v2-shell .main {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 0;
  }

  .v2-shell .navbar-inner {
    max-width: none;
    padding: 0 var(--space-3);
  }

  /* Plus de « carte blanche » : le contenu vit directement dans la colonne */
  .v2-shell .main > .container {
    min-height: calc(100vh - 100px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    max-width: none;
    width: auto;
  }

  .v2-shell .main > .container.feed-container {
    padding: 0;
  }

  /* Éléments fixes : alignés sur la colonne, pas sur la fenêtre */
  .v2-shell .reply-bar {
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    left: var(--col-left);
    max-width: var(--col-w);
    right: auto;
    transform: none;
    width: 100%;
  }

  .v2-shell .snack-root {
    left: var(--col-left);
    max-width: var(--col-w);
    right: auto;
    width: 100%;
  }
}

/* ── Zone droite (≥ 1280px) : suggestions, au-dessus du (+) Pibliye ── */
.v2-shell .right-rail {
  display: none;
}

@media (min-width: 1280px) {
  .v2-shell .right-rail {
    bottom: calc(108px + env(safe-area-inset-bottom)); /* laisse la place au (+) */
    display: flex;
    flex-direction: column;
    gap: 16px;
    left: calc(var(--col-left) + var(--col-w) + 24px);
    overflow-y: auto;
    position: fixed;
    scrollbar-width: none;
    top: 12px;
    width: min(320px, 100vw - var(--col-left) - var(--col-w) - 48px);
    z-index: 100;
  }

  .v2-shell .right-rail__card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 0 6px;
  }

  .v2-shell .right-rail__title {
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 4px;
    padding: 0 16px;
  }

  .v2-shell .right-rail__text {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 12px;
    padding: 0 16px;
  }

  .v2-shell .right-rail__actions {
    display: flex;
    gap: 8px;
    padding: 0 16px 10px;
  }

  .v2-shell .right-rail__row {
    border-bottom: 0;
    gap: 10px;
    padding: 6px 16px;
  }

  .v2-shell .right-rail__row .search-person__avatar {
    height: 36px;
    width: 36px;
  }

  /* « Swiv » en contour : une suggestion, pas un appel à l'action qui crie à côté du fil */
  .v2-shell .right-rail__row .btn-primary {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }

  .v2-shell .right-rail__row .btn-primary:hover {
    background: var(--color-surface-soft);
  }

  .v2-shell .right-rail__cat-icon .material-icons {
    color: var(--color-accent);
    font-size: 20px;
  }
}